乐趣区

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

jiezi

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

枚举值 形容
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
子控件的高度拉伸到与 Row 雷同大小

CrossAxisAlignment.baseline

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

在下面的形容中有 开始的地位 和完结的地位 ，为什么不间接写 右边 或左边 ，其实也是受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 查看，并且能够下载下来运行并体验。

退出移动版