关于ios:Flutter-28Flutter手把手教程UI布局和Widget水平布局控件Row

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

Row

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

Row的构造函数与 Column 的构造函数根本是一样的

Row({
        /// key
    Key key,
    /// Row 的对其形式 默认是 MainAxisAlignment.start
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    /// 示意 Row 在垂直方向占用的大小，默认是 max，示意尽可能的充斥垂直方向空间。如果这是 min 示意尽量小的占用垂直方向空间
    MainAxisSize mainAxisSize = MainAxisSize.max,
    /// 程度方向对其形式 默认是 居中对齐
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    /// 子控件的布局程序，不同国家书写习惯的不同(中文、英语从左往右书写，阿拉伯文从右往左书写)，这个参数能够帮忙咱们调整布局显示程序
    TextDirection textDirection,
    /// 示意垂直方向的对其方向 
    VerticalDirection verticalDirection = VerticalDirection.down,
    /// 基线对齐形式 
    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
子控件的高度拉伸到与 Row 雷同大小

CrossAxisAlignment.baseline

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 会管制书写习惯来扭转布局。这个其实是在做国际化的时候用到的比拟多。

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

verticalDirection

verticalDirection属性不罕用，它有两个值，别离是：VerticalDirection.down和 VerticalDirection.up。
VerticalDirection 配合 CrossAxisAlignment 的参数值，也会有不同的显示成果，跟 textDirection 相似。

• VerticalDirection.down 和 CrossAxisAlignment.start

• VerticalDirection.down 和 CrossAxisAlignment.end

• VerticalDirection.up 和 CrossAxisAlignment.start

• VerticalDirection.up 和 CrossAxisAlignment.end

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