Align Content

Nesta seção, você encontra mais informações sobre a propriedade Align Content utilizada para posicionar elementos em tela.

Align Content

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.

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)
                        )
                )
        )
    }

Flex Start (padrão)

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)
                        )
                )
        )
    }

Flex End

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)
                        )
                )
        )
    }

Center

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)
                        )
                )
        )
    }

Space Between

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)
                        )
                )
        )
    }

Space Around

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)
                        )
                )
        )
    }

Última modificação 24/06/2021: Fix/fix images component pos main (#659) (40e84be5)