故不登高山，不知天之高也；不临深溪，不知地之厚也；

👈🏻 Flutter学习之五 文件命名规范及代码格式化

前言

作为6年的OC coder来说，开始在写Flutter布局的时候还是有点不适应。就拿下面简单的页面来说：

图1
如果用原生开发，一般来说三个控件就OK了，左边2个UILabel，右边是个UIButton，然后设置约束就成了。
但是这在Flutter里面就不能这么整了，Flutter里面要先确定布局方向，是横向的还是纵向的。对于上面的UI，在Flutter里面就是最外层是左右布局，要选用Row，左边2个文本是上下布局要选用Column，最终的结果是，一个Row里面有2个子Widget，一是个Column一个是Button，其中Column里面包含2个Text。

正文

在Flutter中Row和Column是线性布局组件，所谓线性布局，即指沿水平或垂直方向排列子组件。Row和Column都继承自Flex，弹性布局以后再说。

主轴和纵轴

在介绍Row和Column之前，要先提一下主轴和纵轴。如果布局是沿水平方向，那么主轴就是指水平方向，而纵轴即垂直方向；如果布局沿垂直方向，那么主轴就是指垂直方向，而纵轴就是水平方向。在线性布局中，有两个定义对齐方式的枚举类MainAxisAlignment和CrossAxisAlignment，分别代表主轴对齐和纵轴对齐。

Row（水平方向排列）

Row的定义如下：

Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  }) 

• mainAxisSize：表示在水平方向占用的空间，默认是MainAxisSize.max，表示尽可能的占用水平方向的空间，即占用水平方向的最大宽度，和子组件宽度无关。MainAxisSize.min表示尽可能的少占用空间，自身宽度即子组件最大宽。
• mainAxisAlignment：水平方向对齐方式，如果mainAxisSize的值为MainAxisSize.min，那么此属性没有意义，因为子组件的宽度等于Row的宽度。只有mainAxisSize的值为MainAxisSize.max时，MainAxisAlignment.start（center、end）表示左（中、右）对齐。
• textDirection：表示文字初始方向，汉字是从左往右的，阿拉伯是从右往左。设置这个会影响主轴对齐方式，比较好理解。
• verticalDirection：表示Row纵轴（垂直）的对齐方向，默认是VerticalDirection.down，表示从上到下。
• crossAxisAlignment：表示子组件在纵轴方向的对齐方式，Row的高度等于子组件中最高的子元素高度，它的取值和MainAxisAlignment一样(包含start、end、 center三个值)，不同的是crossAxisAlignment的参考系是verticalDirection，即verticalDirection值为VerticalDirection.down时crossAxisAlignment.start指顶部对齐，verticalDirection值为VerticalDirection.up时，crossAxisAlignment.start指底部对齐；而crossAxisAlignment.end和crossAxisAlignment.start正好相反；
• children：子组件数组。

举个栗子🌰

如果理解上面属性的介绍，看下面的代码，估计脑海里就有了大致的UI

Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(" see you again "),
            Text(" I am Twist "),
          ],
        ),
        Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text(" see you again "),
            Text(" I am Twist "),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          textDirection: TextDirection.rtl,
          children: const <Widget>[
            Text(" see you again "),
            Text(" I am Twist "),
          ],
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          verticalDirection: VerticalDirection.up,
          children: const <Widget>[
            Text(
              " see you again ",
              style: TextStyle(fontSize: 30.0),
            ),
            Text(" I am Twist "),
          ],
        ),
      ],
    );

UI显示如下：

2.png

Column（垂直方向排列）

Column是在垂直方向排列其子组件。参数和Row一样，不同的是布局方向为垂直，主轴纵轴正好相反，读者可类比Row来理解。

举个栗子🌰

class ColumnPage extends StatelessWidget {
  const ColumnPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Column'),
      ),
      body: Container(
        color: Colors.red,
        child: Column(
          // 主轴（垂直方向） ，start系统默认值
          mainAxisAlignment: MainAxisAlignment.start,
          // 与主轴垂直（水平方向），center系统默认值
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const <Widget>[
            Text("see"),
            Text("you"),
            Text("again"),
          ],
        ),
      ),
    );
  }
}

为了方便看效果，我加了一个背景颜色， 效果图如图3：

3.png

Column下默认主轴是最大值，即屏高，宽度没有设置，默认是子组件（again）最大宽。

总结

整体来说还是很好理解的，看到一个页面就先横纵咔咔一分，然后开始横套纵、纵套横，这样一个页面就出来了。

后记

在写UI的时候，有的时候需要设置一个简单的间距，或者是某个组件占用剩下的全部空间，请看下篇文章Expanded。