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

2019-12-16 分类：Flutter 作者：北漂程序员阅读（1933）

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) 打赏