【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column

弗拉德 2021/1/15 20:08:17

作者 | 弗拉德 来源 | 弗拉德 Column Column是在Flutter中常见的布局控件,它负责垂直方向布局。Row负责水平方向布局,二者都是继承于Flex,类似于iOS里面的UIScrollView,但是又有很多不同。 先来看一下Column的构造函数Column({/// keyKey key,/// Column的对其方式 默…

作者 | 弗拉德

来源 | 弗拉德

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

居顶部

2020_01_12_column_mainaxisalignment_start_1

MainAxisAlignment.center

居中间

2020_01_12_column_mainaxisalignment_center

MainAxisAlignment.end

居底部

2020_01_12_column_mainaxisalignment_end

MainAxisAlignment.spaceBetween

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

2020_01_12_column_mainaxisalignment_specebtween

MainAxisAlignment.spaceEvenly

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

2020_01_12_column_mainaxisalignment_speceevenly

MainAxisAlignment.spaceAround

把剩余空间拆分成 2n 份(n是子控件的个数),这里也就是8分,每个子控件上下各放一份

2020_01_12_column_mainaxisalignment_specearound

crossAxisAlignment

crossAxisAlignment接收一个CrossAxisAlignment枚举值,有以下5中枚举

| 枚举值 | 描述 |

| ---- | ---- |

| start | 与 开始的位置对齐 |

| end | 与 结束的位置对齐 |

| center | 居中对齐 |

| stretch | 水平方向扩充与Column相同大小 |

| baseline | 无效 |

CrossAxisAlignment.start

居左侧

2020_01_12_column_crossaxisalignment_start

CrossAxisAlignment.center

居中

2020_01_12_column_crossaxisalignment_center

CrossAxisAlignment.end

居右侧

2020_01_12_column_crossaxisalignment_end

CrossAxisAlignment.stretch

子控件的宽度拉伸到与Column相同大小

2020_01_12_column_crossaxisalignment_stretch

textDirection

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

| 枚举值 | 描述 |

| ---- | ---- |

| rtl | 书写习惯是从右边开始 子控件默认从右边对齐 |

| ltr | 书写习惯是从左边开始 子控件默认从左边对齐 |

crossAxisAlignment参数会受到textDirection参数值影响。

如下:

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

2020_01_12_column_ltr_start

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

2020_01_12_column_ltr_end

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

2020_01_12_column_rtl_start

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

2020_01_12_column_rtl_end

总的来说textDirection会控制书写习惯来改变布局。这个其实是在做国际化的时候用到的比较多。在下一节即将讲解的Row也相同的会收到影响。

在上面的描述中有开始的位置结束的位置,为什么不直接写左边右边,其实也是受textDirection的影响,开始的位置就是书写开始的位置,结束的位置就是写结束的位置。

想体验以上的Column的示例的运行效果,可以到[我的Github仓库] github.com/Johnson8888/learn_flutter项目flutter_app->lib->routes->column_page.dart查看,并且可以下载下来运行并体验。


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[【Flutter 2-7】Flutter手把手教程UI布局和Widget——垂直布局控件Column]http://www.zyiz.net/tech/detail-150995.html

上一篇:「我的工作是制造混沌」,我与 Chaos Mesh? 的故事

下一篇:酷工作丨阿里菜鸟网络招测试专家、淘宝天猫急招 P6/P7、字节跳动多岗位招聘、TriviumChina 招全栈开发

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程