Flutter Row&Column组件

Flutter Row&Column组件

简述

Row表示水平方向线性布局，Column表示垂直方向线性布局，类似于Android中的LinearLayout布局。

线性布局有主轴和纵轴之分，如果是水平线性布局，主轴指水平方向，交叉轴指垂直方向。

• 主轴方向会尽可能的占用最大空间，而纵轴的长度取决于他们最大子元素的长度。还有一种特殊情况Column嵌套Column，外层Column会尽可能占用空间，里层Column则所占用空间为实际大小。

基本属性

mainAxisSize：主轴方向占用空间。
		- MainAxisSize.max：表示尽可能多占用空间，为默认值。
		- MainAxisSize.min：表示尽可能少占用空间。

mainAxisAlignment：主轴对齐方式。当`mainAxisSize=MainAxisSize.min`时该属性无意义。
    - start：子元素尾部对齐。
    - end：子元素头部对齐。
    - center：子元素居中对齐
    - spaceBetween：左右两端无间距，中间平分间距。
    - spaceAround：左右两端间距相同。
    - spaceEvenly：平分间距。

crossAxisAlignment：纵轴对齐方式，与主轴对齐方式类似。

textDirection：水平方向子组件的布局顺序，默认为系统环境（中文和英文是从左到右，阿拉伯语是从右到左）。
		- TextDirectio.rtl：子元素从右往左排列。
		- TextDirection.ltr：子元素从左往右排列。

verticalDirection：垂直的对齐方向，默认是VerticalDirection.down表示从上到下。
    - VerticalDirection.up：表示开始在底部，结束在顶部。
    - VerticalDirection.down：表示开始在顶部，结束在底部。

Row

Padding(
  padding: const EdgeInsets.all(10.0),
  child: Container(
    color: Colors.grey,
    child: Row(
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.blue,
        ),
      ],
    ),
  ),
)

Column

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Container(
    color: Colors.grey,
    child: Column(
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
        Container(
          width: 150,
          height: 150,
          color: Colors.blue,
        ),
      ],
    ),
  ),
)