Essa propriedade define como as linhas são distribuídas ao longo do eixo transversal (vertical) do container e tem os seguintes atributos: flex-start, flex-end, center, space-between, space-around e stretch.
As linhas são distribuídas uniformemente ao longo do eixo transversal e ocupa todo o espaço disponível:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.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"),
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.stretch)
)
)
)
}
As linhas são distribuídas no início do eixo transversal:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.FLEX_START
}
}
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.flexStart)
)
)
)
}
As linhas são distribuídas no fim do eixo transversal:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.FLEX_END
}
}
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.flexEnd)
)
)
)
}
As linhas são mantidas no centro do eixo transversal:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.CENTER
}
}
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.center)
)
)
)
}
A primeira linha é deslocada para o início do eixo transversal, a última para o final e as demais são distribuídas uniformemente entre eles:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.SPACE_BETWEEN
}
}
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.spaceBetween)
)
)
)
}
As linhas são uniformemente distribuídas ao longo do eixo transversal. As margens são atribuídas igualmente à esquerda e à direita (ou acima e abaixo, dependendo da direção do eixo transversal). Por isso a primeira e a última linha não ficam “coladas” nas bordas do container:
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"),
createText(backgroundColor = "#142850", text = "texto 10"),
createText(backgroundColor = "#dd7631", text = "texto 11"),
createText(backgroundColor = "#649d66", text = "texto 12"),
createText(backgroundColor = "#142850", text = "texto 13"),
createText(backgroundColor = "#dd7631", text = "texto 14"),
createText(backgroundColor = "#649d66", text = "texto 15")
)
).setFlex {
grow = 1.0
flexDirection = FlexDirection.ROW
flexWrap = FlexWrap.WRAP
alignContent = AlignContent.SPACE_AROUND
}
}
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"),
createText(backgroundColor: "#142850",text: "10"),
createText(backgroundColor: "#dd7631",text: "11"),
createText(backgroundColor: "#649d66",text: "12"),
createText(backgroundColor: "#142850",text: "13"),
createText(backgroundColor: "#dd7631",text: "14"),
createText(backgroundColor: "#649d66",text: "15"),
],widgetProperties: WidgetProperties(
flex: Flex()
.grow(1)
.flexDirection(.row)
.flexWrap(.wrap)
.alignContent(.spaceAround)
)
)
)
}
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.