Flutter（5）：基础组件之Row/Column

2020-09-19 本文已影响0人 starryxp

Flutter教学目录持续更新中

github源代码持续更新中

1.Row/Column介绍

Row：在水平方向上排列子widget的列表。
Column：在垂直方向上排列子widget的列表。
注意：这两个属于多子节点空间，可以将children排列成一行/一列，但是自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

2.属性介绍

MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。
其中MainAxisAlignment枚举值：
center：将children放置在主轴的中心；
end：将children放置在主轴的末尾；
spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；
spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；
start：将children放置在主轴的起点；
其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。
MainAxisSize：在主轴方向占有空间的值，默认是max。
MainAxisSize的取值有两种：
max：根据传入的布局约束条件，最大化主轴方向的可用空间；
min：与max相反，是最小化主轴方向的可用空间；
CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。
CrossAxisAlignment枚举值有如下几种：
baseline：在交叉轴方向，使得children的baseline对齐；
center：children在交叉轴上居中展示；
end：children在交叉轴上末尾展示；
start：children在交叉轴上起点处展示；
stretch：让children填满交叉轴方向；
TextDirection：阿拉伯语系的兼容设置，一般无需处理。
VerticalDirection：定义了children摆放顺序，默认是down。
VerticalDirection枚举值有两种：
down：从top到bottom进行布局；
up：从bottom到top进行布局。
top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。
TextBaseline：使用的TextBaseline的方式，有两种，前面已经介绍过。

3.Expanded介绍

这个是Row/Column的内的小控件，可以用来实现权重的布局

4.上代码

这边使用一个Container，里面是Row，使用Expanded对子节点进行权重处理，如果不使用Expanded，直接放入其他控件也是可以的，只是无法设置权重

1600326860530.jpg

 Container(
            color: Colors.grey,
            padding: EdgeInsets.only(top: 10, bottom: 10),
            margin: EdgeInsets.only(top: 10),
            child: Row(
              children: [
                Expanded(
                  child: Text(
                    'Deliver features faster',
                    textAlign: TextAlign.center,
                  ),
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Text(
                    'Craft beautiful UIs',
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  child: FlutterLogo(),
                  flex: 2,
                ),
                FlutterLogo(),
                FittedBox(
                  fit: BoxFit.contain,
                  child: FlutterLogo(),
                ),
                Expanded(
                  child: FittedBox(
                    fit: BoxFit.contain,
                    child: FlutterLogo(),
                  ),
                )
              ],
            ),
          ),

对于内容过长的时候，会有溢出提示：

1600326871195.jpg

Container(
            color: Colors.grey,
            margin: EdgeInsets.only(top: 10),
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Row(
              children: [
                FlutterLogo(),
                Text(
                  '111111111111111111111111111111111111111111111111111111111111111111111111',
                  textAlign: TextAlign.center,
                ),
                Icon(Icons.add_shopping_cart)
              ],
            ),
          ),

MainAxisAlignment.center：将children放置在主轴的中心；