⚠️ Você está vendo a documentação da versão: v1.5
Beagle v1.5 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 .
Flex Direction
Flex Direction
A propriedade flex-direction é aplicada a um container e define o eixo/fluxo de exibição em que os elementos serão organizados. Essa propriedade tem os seguintes atributos: row, row-reverse, column, column-reverse.
createText com intuito de retornar um componente de texto com um estilo aplicado. Mas essa configuração não é obrigatória.Confira abaixo os exemplos de comportamento dos elementos para cada atributo:
Row
Os itens são organizados em forma de linha exibindo seus elementos da esquerda para a direita:
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")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW
)
)
}
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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
)
)
)
}
Row Reverse
Os itens são organizados em forma de linha, exibindo seus elementos da direita para a esquerda:
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")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.ROW_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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.rowReverse)
)
)
)
}
Column (Padrão)
Os itens são organizados em forma de colunas e são posicionados de cima para 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")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.COLUMN
)
)
}
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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.column)
)
)
)
}
Column Reverse
Os itens são organizados em forma de colunas e são posicionados de baixo para cima:
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")
)
).applyFlex(
Flex(
flexDirection = FlexDirection.COLUMN_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"),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.columnReverse)
)
)
)
}
Feedback
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.