关于ios:Flutter-27Flutter手把手教程UI布局和Widget垂直布局控件Column

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

Column

Column是在 Flutter 中常见的布局控件，它负责垂直方向布局。Row 负责程度方向布局，二者都是继承于 Flex，相似于iOS 外面的 UIScrollView，然而又有很多不同。
先来看一下 Column 的构造函数

Column({
    /// key
    Key key,
    /// Column 的对其形式 默认是 MainAxisAlignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// 示意 Column 在垂直方向占用的大小，默认是 max，示意尽可能的充斥垂直方向空间。如果这是 min 示意尽量小的占用垂直方向空间
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// 横轴对其形式 默认是 居中对齐
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// 子控件的布局程序，不同国家书写习惯的不同(中文、英语从左往右书写，阿拉伯文从右往左书写)，这个参数能够帮忙咱们调整布局显示程序
    TextDirection textDirection,
    /// 示意垂直方向的对其方向 
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// 基线对齐形式 在 Row 外面会有应用
    TextBaseline textBaseline,
    /// 子控件
    List<Widget> children = const <Widget>[],}) 

mainAxisAlignment

mainAxisAlignment接管一个 MainAxisAlignment 类型的枚举，MainAxisAlignment共有六个枚举值，如下：

看形容比拟艰涩，咱们间接来看成果：

MainAxisAlignment.start
居顶部

MainAxisAlignment.center
居两头

MainAxisAlignment.end
居底部

MainAxisAlignment.spaceBetween
把残余的空间拆分成 n - 1 份(n 是子控件的个数)，这里也就是 3 分，每一份都插入到子控件之间。看绿色数字就是每一份的编号

MainAxisAlignment.spaceEvenly

把残余的空间拆分成 n + 1 份(n 是子控件的个数)，这里也就是 5 分，而后均匀分布。

MainAxisAlignment.spaceAround
把残余空间拆分成 2n 份(n 是子控件的个数)，这里也就是 8 分，每个子控件高低各放一份

crossAxisAlignment

crossAxisAlignment接管一个 CrossAxisAlignment 枚举值，有以下 5 中枚举

CrossAxisAlignment.start
居左侧

CrossAxisAlignment.center
居中

CrossAxisAlignment.end
居右侧

CrossAxisAlignment.stretch
子控件的宽度拉伸到与 Column 雷同大小

textDirection

textDirection参数接管一个 TextDirection 类型的枚举类型，它有两个不同的枚举值，如下

crossAxisAlignment参数会受到 textDirection 参数值影响。
如下：

• 当 textDirection的参数值为 ltr 时，crossAxisAlignment参数为 CrossAxisAlignment.start 这个时候子控件居左对齐。

• 当 textDirection的参数值为 ltr 时，crossAxisAlignment参数为 CrossAxisAlignment.end 这个时候子控件居右对齐。

• 当 textDirection的参数值为 rtl 时，crossAxisAlignment参数为 CrossAxisAlignment.start 这个时候子控件居右对齐。

• 当 textDirection的参数值为 rtl 时，crossAxisAlignment参数为 CrossAxisAlignment.end 这个时候子控件居做对齐。

总的来说 textDirection 会管制书写习惯来扭转布局。这个其实是在做国际化的时候用到的比拟多。在下一节行将解说的 Row 也雷同的会收到影响。

在下面的形容中有 开始的地位 和完结的地位 ，为什么不间接写 右边 或左边 ，其实也是受textDirection 的影响，开始的地位 就是书写开始的地位，完结的地位 就是写完结的地位。

想体验以上的 Column 的示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->column_page.dart 查看，并且能够下载下来运行并体验。