乐趣区

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

jiezi

作者 | 弗拉德
起源 | 弗拉德（公众号：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共有六个枚举值，如下：

枚举值 形容
start 与 开始的地位对齐
end 与 完结的地位对齐
center 居中对齐
spaceBetween 把残余的空间拆分成 n - 1 份(n 是子控件的个数) 每一份都插入到子控件之间
spaceEvenly 把残余的空间拆分成 n + 1 份(n 是子控件的个数) 而后均匀分布
spaceAround 把残余空间拆分成 2n 份(n 是子控件的个数) 每个子控件高低各放一份

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

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 中枚举

枚举值 形容
start 与 开始的地位对齐
end 与 完结的地位对齐
center 居中对齐
stretch 程度方向裁减与 Column 雷同大小
baseline 有效

CrossAxisAlignment.start
居左侧

CrossAxisAlignment.center
居中

CrossAxisAlignment.end
居右侧

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

textDirection

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

枚举值 形容
rtl 书写习惯是从左边开始 子控件默认从左边对齐
ltr 书写习惯是从右边开始 子控件默认从右边对齐

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 查看，并且能够下载下来运行并体验。

退出移动版