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

8次阅读

共计 2602 个字符，预计需要花费 7 分钟才能阅读完成。

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

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共有六个枚举值，如下：

枚举值	形容
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 枚举值，有以下 5 中枚举

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

CrossAxisAlignment.start
居左侧

CrossAxisAlignment.center
居中

CrossAxisAlignment.end
居右侧

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

CrossAxisAlignment.baseline

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

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

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