Flutter基础组件之Row/Column

介绍

Row：在水平方向上排列子widget的列表，属于多子元素容器。
Column：在垂直方向上排列子widget的列表，属于多子元素容器。
他们的父类都是Flex组件，根据Flex设置方向为水平或者垂直，就有了Row和Column。
注意：这两个组件自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。可以在外层套一个SingleChildScrollView之类的组件使它们可以滚动。

属性

1. direction
   设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。
2. mainAxisAlignment
   设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：

• MainAxisAlignment.start：左对齐，默认值;
• MainAxisAlignment.end：右对齐;
• MainAxisAlignment.center：居中对齐;
• MainAxisAlignment.spaceBetween：两端对齐;
• MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;

• MainAxisAlignment.spaceEvenly：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等；
  对比效果如下：

  
  

3. mainAxisSize
   设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：

• MainAxisSize.max：主轴的大小是父容器的大小；

• MainAxisSize.min：主轴的大小是其子 Widget 大小之和；
  对比效果如下：

  
  

4. crossAxisAlignment
   设置子 Widget 沿着交叉轴方向的排列方式，默认 CrossAxisAlignment.center，可设置的方式如下：

• CrossAxisAlignment.start：与交叉轴的起始位置对齐；
• CrossAxisAlignment.end：与交叉轴的结束位置对齐；
• CrossAxisAlignment.center：居中对齐；
• CrossAxisAlignment.stretch：填充整个交叉轴；

• CrossAxisAlignment.baseline：按照基线对齐；
  对比效果如下：

  
  

5. textDirection
   决定水平方向上的摆放顺序，设置方式如下：

• TextDirection.ltr：从左到右摆放
• TextDirection.rtl：从右到左摆放

6. verticalDirection
   设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down，设置方式如下：

• VerticalDirection.down：start 在顶部，end 在底部；
• VerticalDirection.up：start 在底部，end 在顶部。

7. textBaseline
   设置文字对齐的基线类型，可设置的值如下：

• TextBaseline.alphabetic：与字母基线对齐；
• TextBaseline.ideographic：与表意字符基线对齐；
  使用时当 crossAxisAlignment 设置为 baseline 时，必须设置 textBaseline 属性的值

8. clipBehavior
   当子组件超出容器时的裁剪行为，设置方式如下：

• Clip.none：不裁剪
• Clip.hardEdge：裁剪
• Clip.antiAlias：裁剪，抗锯齿
• Clip.antiAliasWithSaveLayer：裁剪，抗锯齿

Expanded和Flexible

1. fit属性
   Flexible 的 fit 属性默认为 FlexFit.loose，而 Expanded 继承 Flexible，其 fit 属性指定为 FlexFit.tight，可设置的 fit 属性如下：

• tight：强制填充可利用的空间；
• loose：不强制填充可利用空间，Widget自身大小。

2. flex属性
   Flexible 的 flex属性是弹性系数
   对比效果如下：

   
   
   
   

   Expanded 可以使 Row、Column、Flex 里面的组件填充沿着主轴可利用的空间，如果多个 Widget 都使用了 Expanded 组件，可以使用 Expanded 的 flex 属性按照比例分配主轴空间，flex 属性相当于 Android LinearLayout 的 weight 属性
   示例代码如下：

Row(
    mainAxisAlignment: MainAxisAlignment.start,
    mainAxisSize: MainAxisSize.max,
    children: [
      Expanded(
        flex: 1,
        child: Container(
            width: 50,
            height: 50,
            color: Colors.red,
            child: const Center(
              child: Text(
                "A",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            )),
      ),
      Expanded(
        flex: 2,
        child: Container(
            width: 50, // Row Expanded下width无效
            height: 50, // Column Expanded下height无效
            color: Colors.green,
            child: const Center(
              child: Text(
                "B",
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            )),
      ),
      Container(
          width: 50,
          height: 50,
          color: Colors.yellow,
          child: const Center(
            child: Text(
              "C",
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          )),
    ],
  );

显示效果如下：

Spacer

Spacer 用来调节 Widget 之间的间距，其本质也是build了一个Expanded组件。会占据所有的剩余空间，因此 MainAxisAlignment 的设置将无效，Spacer 的属性 flex 用于设置剩余空间的分配权重，默认值为 1，表示占据所有剩余空间，如果两个以上 Spacer 则按照 flex 分配剩余空间
示例代码：

Row(
    children: [
      Container(
        width: 80,
        height: 80,
        color: Colors.red,
      ),
      const Spacer(
        flex: 1,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
      const Spacer(
        flex: 2,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.yellow,
      ),
    ],
  );

运行效果如下：

以上就是Row和Column组件的基本介绍。以及结合Expanded和Spacer来布局的例子