简介

Row和Column为常用的多子控件容器组件，Row水平布局、Column垂直布局

重要概念：

mainAxisAlignment 主轴对齐方式：与布局相同方向的对齐方式，Row为水平方向，Column为垂直方向
crossAxisAlignment 交叉轴对齐方式：与布局垂直方向的对齐方式，Row为垂直方向，Column为水平方向

Row

Row主轴对齐方向

Row控件的主轴mainAxisAlignment对齐方式默认值是MainAxisAlignment.start

Row(
   mainAxisAlignment: MainAxisAlignment.start,
   children: [
     Container(
       width: 100,
       height: 50,
       color: Colors.red,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.yellow,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.green,
     )
   ],
)

截屏2021-04-02 下午5.22.40.png

Row交叉轴对齐方向

Row控件的交叉轴crossAxisAlignment对齐方式默认值是CrossAxisAlignment.center

 Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 30,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 50,
          color: Colors.yellow,
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.green,
        )
      ],
    );

截屏2021-04-06 上午9.30.21.png

Row的mainAxisSize属性

表示主轴尺寸，有 min 和 max 两种方式默认max

Container(
     decoration: BoxDecoration(border: Border.all(color: Colors.black)),
     child: Row(
         mainAxisSize: MainAxisSize.min,
         ...
     ),
)

max效果

max效果

min效果

min效果

Column

Column主轴对齐方向

Column主轴对齐方向控件的主轴mainAxisAlignment对齐方式默认值是MainAxisAlignment.start`

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)

截屏2021-04-06 上午10.01.05.png

Column交叉轴对齐方向

Column控件的交叉轴crossAxisAlignment对齐方式默认值是CrossAxisAlignment.center

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)

截屏2021-04-06 上午10.07.04.png

Column的mainAxisSize属性