北漂程序员知识点积累分享
当前位置: Flutter > flutter水平和垂直布局(Row和Column)

flutter水平和垂直布局(Row和Column)

2019-12-16 分类:Flutter 作者:北漂程序员 阅读(590)

LinearLayout里面的android:orientation="horizontal”属性相当于Row组件

LinearLayout里面的android:orientation="vertical”属性相当于Column组件

Row和Column

1
2
3
4
5
在原生Android开发中,我们经常会用LinearLayout来达到水平或垂直方向的布局,
在Flutter中有两个常用的组件也能够做到类似的效果,分别是Row和Column组件,
Row组件主要功能是处理水平方向的布局

Column组件主要功能是处理垂直方向的布局

在Flutter中我们可以使用Row/Column组件的MainAxisAlignment以及CrossAxisAlignment实现控件的对齐效果

MainAxisAlignment

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
gravity属性在Android里面是用于指定控件本身或子孩子控件的对齐属性。
在Flutter中我们可以使用Row/Column组件的MainAxisAlignment以及CrossAxisAlignment实现控件的对齐效果
MainAxisAlignment有6个属性值,默认值为start,分别是:
1、MainAxisAlignment.start,将子控件放在主轴的起始位置。
2、MainAxisAlignment.end,将子控件放在主轴末尾。
3、MainAxisAlignment.center,将子控件放在主轴中间位置。
下面这三个属性需要特别关注一下:
// 将主轴方向上的空白区域等分,使得子控件之间的空白区域相等,
// 两端的子控件都靠近首尾,没有间隙。
4、MainAxisAlignment.spaceBetween
// 将主轴方向上的空白区域等分,使得子控件之间的空白区域相等,
// 两端的子控件都靠近首尾,首尾子控件的空白区域为1/2。
5、MainAxisAlignment.spaceAround
// 将主轴方向上的空白区域等分,使得子控件之间的空白区域相等,包括首尾。
6、MainAxisAlignment.spaceEvenly

CrossAxisAlignment

1
2
3
4
5
6
7
8
9
10
CrossAxisAlignment是设置交叉轴方向的对齐方式,
给Row组件设置CrossAxisAlignment属性,那么它的交叉轴为垂直方向。
给Column组件设置CrossAxisAlignment属性,那么它的交叉轴为水平方向。

CrossAxisAlignment 有5个属性值,默认值为center,分别是:
CrossAxisAlignment.start, 子孩子控件显示在交叉轴的起始位置。
CrossAxisAlignment.end, 子孩子控件显示在交叉轴的末尾位置。
CrossAxisAlignment.center, 子孩子控件显示在交叉轴的中间位置。
CrossAxisAlignment.stretch, 子孩子控件完全填充交叉轴方向的空间。
CrossAxisAlignment.baseline, 让子孩子控件的baseline在交叉轴方向对齐

Expanded组件里面的flex属性设置权重

1
2
Android中layout_weight是LinearLayout里面的属性,它是用来给子孩子设置权重的,表示给子孩子按照设置的比例去分配空间。
在Flutter中我们可以使用Expanded包裹Row或Column组件,使用Expanded组件里面的flex属性 去实现同样的效果。

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢支持

支付宝
微信
0

谢谢支持

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - flutter水平和垂直布局(Row和Column)

博客简介

北漂程序员的生活积累,了解学习更多内容,微信搜索公众号:技术开发精选学习笔记

最近更新

精彩评论

服务热线:
 

 QQ在线交流