Flutter布局方式(1)-Row和Column

在Flutter中有一些布局,比如今天要说的Row/Column布局,看字面意思就是我们熟知的横向布局和纵向布局.
先说一下构造方法:

Row({
  Key key,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  TextDirection textDirection,
  VerticalDirection verticalDirection = VerticalDirection.down,
  TextBaseline textBaseline,
  List<Widget> children = const <Widget>[],
})

Row和Column的构造方法是一样的,用法也是一样的,就是方向上不同,我们对属性每一个去介绍:

1. MainAxisAlignment:主轴的对齐方式,什么是主轴呢?如果当前是按照Row组件,那么主轴就是水平的,如果当前是Row的布局,那么主轴就是水平的:

属性名称	样式
start	内部的子组件将从主轴起始位置开始排列(正向排列)
end	内部的子组件将从主轴末尾位置开始排列(反向排列)
center	内部的子组件将从主轴中间位置开始排列(居中)
spaceBetween	内部的首尾子组件靠近首尾两端，其余子组件居中排列且组件间的间距一样
spaceAround	内部的子组件居中排列，且每个子组件的左右边距一样大
spaceEvenly	内部的子组件居中显示，每个空间的左边和右边都有相同的间距

MainAxisAlignment.png

2.mainAxisSize:这个属性用来设置 Row/Column 布局的宽高值，有两个值可以设置:

属性名称	样式
max	整个控件占据的最大值
min	整个控件占据的最小值

mainAxisSize的max.png mainAxisSize的min.png

3. crossAxisAlignment:这个属性用来控制非主轴的对齐方式:

属性名称	样式
start	内部的子组件将从非主轴起始位置开始排列（正向排列）
end	内部的子组件将从非主轴末尾位置开始排列（反向排列）

crossAxisAlignment.png

4. textDirection:这个属性用来控制 Row 布局中内部子组件的摆放顺序:

属性名称	样式
TextDirection.ltr	从左至右排列
TextDirection.rtl	从右至左排列

textDirection.png

5. verticalDirection:这个属性用来控制 Column 布局中内部子组件的摆放顺序:

属性名称	样式
VerticalDirection.up	从下至上排列
VerticalDirection.down	从上至下排列

verticalDirection.png

6. textBaseline:这个属性也是用来设置子组件对齐的，只不过对齐的是字符的基线:

属性名称	样式
TextBaseline.ideographic	用于对齐表意字符的水平线
TextBaseline.alphabetic	用于对齐字母字符的水平线

需要注意的是,这个需要配合 crossAxisAlignment 属性来使用，来看一下具体的效果.

textBaseline.png

                            想了解更多Flutter学习知识请联系:QQ(814299221)