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 .
Essa propriedade define como os itens são distribuídos ao longo do eixo transversal do container e tem os seguintes atributos: flex-start, flex-end, center, baseline e stretch.
Os itens serão expandidos para preencher toda a dimensão do eixo transversal (altura ou largura) da tela:
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(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.STRETCH
)
)
}
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()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.stretch)
)
)
)
}
Os itens são deslocadas para o início do eixo transversal:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.FLEX_START
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.flexStart)
)
)
)
}
Os itens são deslocadas para o final do eixo transversal:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.FLEX_END
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.flexEnd)
)
)
)
}
Os itens são centralizados no eixo transversal:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.CENTER
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(300).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(200).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(150).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.center)
)
)
)
}
Os itens são alinhados a partir da base da primeira linha de texto de cada um:
private fun screen() :Widget{
return Container(
children = listOf(
createText(backgroundColor = "#142850", text = "texto 1")
.applyFlex(
flex = Flex(
size = Size(
width = 300.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#dd7631", text = "texto 2")
.applyFlex(
flex = Flex(
size = Size(
width = 200.unitReal(),
height = 100.unitReal()
)
)
),
createText(backgroundColor = "#649d66", text = "texto 3")
.applyFlex(
flex = Flex(
size = Size(
width = 150.unitReal(),
height = 100.unitReal()
)
)
)
)
).applyFlex(
Flex(
grow = 1.0,
justifyContent = JustifyContent.SPACE_EVENLY,
alignItems = AlignItems.BASELINE
)
)
}
private func screen() -> Screen {
return
Screen(
navigationBar: NavigationBar(title: "Flex"),
child:
Container(children: [
createText(backgroundColor: "#142850",text: "1").applyFlex(
Flex().size(Size().width(70).height(100))),
createText(backgroundColor: "#dd7631",text: "2").applyFlex(
Flex().size(Size().width(40).height(100))),
createText(backgroundColor: "#649d66",text: "3").applyFlex(
Flex().size(Size().width(100).height(100))),
],widgetProperties: WidgetProperties(
flex: Flex()
.flexDirection(.row)
.grow(1)
.justifyContent(.spaceEvenly)
.alignItems(.baseline)
)
)
)
}
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.