Beagle v1.6 não é mais mantida ativamente. A versão documentada que você está visualizando pode conter funcionalidades depreciadas. Para obter as funcionalidades mais recentes, consulte a nossa última versão .
Por padrão os itens do container tentarão se ajustar em uma única linha dentro do container, mas para que isso ocorra a sua largura original pode ser ajustada. A propriedade flex-wrap altera esse comportamento e faz a “quebra de linha” nos itens, e ela tem os seguintes atributos: nowrap, wrap, wrap-reverse.
Todos os itens serão dispostos em uma linha:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.NO_WRAP
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.flexWrap(.noWrap)
)
)
)
}
A quebra de linha irá acontecer e os itens mais à direita serão deslocados para a linha de baixo:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.flexWrap(.wrap)
)
)
)
}
A quebra de linha irá acontecer e os itens mais à direita serão deslocados para a linha acima:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1"),
createText(backgroundColor = "#dd7631", text = "texto 2"),
createText(backgroundColor = "#649d66", text = "texto 3"),
createText(backgroundColor = "#142850", text = "texto 4"),
createText(backgroundColor = "#dd7631", text = "texto 5"),
createText(backgroundColor = "#649d66", text = "texto 6"),
createText(backgroundColor = "#142850", text = "texto 7"),
createText(backgroundColor = "#dd7631", text = "texto 8"),
createText(backgroundColor = "#649d66", text = "texto 9")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW,
flexWrap = FlexWrap.WRAP_REVERSE
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1"),
createText(backgroundColor: "#dd7631",text: "2"),
createText(backgroundColor: "#649d66",text: "3"),
createText(backgroundColor: "#142850",text: "4"),
createText(backgroundColor: "#dd7631",text: "5"),
createText(backgroundColor: "#649d66",text: "6"),
createText(backgroundColor: "#142850",text: "7"),
createText(backgroundColor: "#dd7631",text: "8"),
createText(backgroundColor: "#649d66",text: "9"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.flexWrap(.wrapReverse)
)
)
)
}
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.