Coluna do layout básico do Flutter

Coluna significa layout vertical e os subcontroles que ela contém podem ser organizados verticalmente

código mostra como abaixo:

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Column(
            children: [
              Container(
                width: 120,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                width: 180,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

O efeito é o seguinte:

Vamos dar uma olhada em vários parâmetros que a Coluna possui

Column({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline,
    List<Widget> children = const <Widget>[],
  })

MainAxisAlignment: O alinhamento do eixo principal é o alinhamento vertical dos controles de nêutrons da coluna (PS: para coluna, o eixo principal é a direção vertical, para linha, o eixo principal é a direção horizontal)

Existem vários valores opcionais:

MainAxisAlignment.start: Disposto na parte superior (da estrutura da coluna, pode-se ver que este é o valor padrão)

MainAxisAlignment.end: Organizado na parte inferior. código mostra como abaixo:

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                width: 100,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 180,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

O efeito é o seguinte:

MainAxisAlignment.center: Centralizado.

O código é quase o mesmo que o anterior, então não vou colar. O efeito é o seguinte:

MainAxisAlignment.spaceAround: Os intervalos superior e inferior de cada subcomponente são iguais, ou seja, a margem é igual. O efeito é o seguinte:

MainAxisAlignment.spaceBetween: ambas as extremidades estão alinhadas, ou seja, o primeiro subcomponente está na parte superior, o último subcomponente está na parte inferior e os componentes restantes são distribuídos uniformemente no meio. O efeito é o seguinte:

MainAxisAlignment.spaceEvenly: Cada subcomponente é distribuído uniformemente, ou seja, o espaço vertical é distribuído uniformemente. O efeito é o seguinte:

CrossAxisAlignment: O alinhamento do eixo cruzado é o alinhamento dos sub-controles na coluna de nêutrons na direção horizontal. O chamado eixo cruzado é a direção perpendicular ao eixo principal (PS: para Coluna, seu eixo cruzado é a direção horizontal . Para Row, seu eixo transversal é a direção vertical)

crossAxisAlignment tem os seguintes valores opcionais

CrossAxisAlignment.center: Os subcomponentes são centralizados na coluna (você pode ver pela estrutura da coluna que este é o valor padrão), então os subcontroles na Figura 1 serão centralizados na direção vertical.

CrossAxisAlignment.start: os subcomponentes são alinhados à esquerda na coluna, o efeito é o seguinte

CrossAxisAlignment.end: os subcomponentes são alinhados à direita na coluna

O efeito é o seguinte:

CrossAxisAlignment.stretch: o eixo cruzado é esticado para preencher o layout pai.

O efeito é o seguinte:

MainAxisSize: Adaptação do tamanho do eixo principal, existem dois valores opcionais

MainAxisSize.min: mantenha a altura consistente com os controles filho

código mostra como abaixo

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          color: Colors.lightGreen,
          child: Container(
            color: Colors.blueGrey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 120,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 180,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

O efeito é o seguinte:

MainAxisSize.max: A altura é preenchida com a direção do eixo principal (este é o valor padrão)

O efeito é o seguinte:

VerticalDirection: A ordem na qual os subcomponentes são organizados na direção vertical. A coluna é organizada de cima para baixo por padrão. Se for definido, pode ser organizado de baixo para cima

Os valores possíveis são:

 --VerticalDirection.down: organiza de cima para baixo (essa é a direção padrão)

 --VerticalDirection.up: organizar de baixo para cima

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          color: Colors.lightGreen,
          child: Container(
            color: Colors.blueGrey,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              verticalDirection: VerticalDirection.up,
              children: [
                Container(
                  width: 120,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 180,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

O efeito é o seguinte:

A introdução acabou~