在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的构造方法是一样的,用法也是一样的,就是方向上不同,我们对属性每一个去介绍:
- MainAxisAlignment:主轴的对齐方式,什么是主轴呢?如果当前是按照Row组件,那么主轴就是水平的,如果当前是Row的布局,那么主轴就是水平的:
| 属性名称 | 样式 |
|---|---|
| start | 内部的子组件将从主轴起始位置开始排列(正向排列) |
| end | 内部的子组件将从主轴末尾位置开始排列(反向排列) |
| center | 内部的子组件将从主轴中间位置开始排列(居中) |
| spaceBetween | 内部的首尾子组件靠近首尾两端，其余子组件居中排列且组件间的间距一样 |
| spaceAround | 内部的子组件居中排列，且每个子组件的左右边距一样大 |
| spaceEvenly | 内部的子组件居中显示，每个空间的左边和右边都有相同的间距 |
MainAxisAlignment.png
2.mainAxisSize:这个属性用来设置 Row/Column 布局的宽高值，有两个值可以设置:
| 属性名称 | 样式 |
|---|---|
| max | 整个控件占据的最大值 |
| min | 整个控件占据的最小值 |
mainAxisSize的max.png
mainAxisSize的min.png
- crossAxisAlignment:这个属性用来控制非主轴的对齐方式:
| 属性名称 | 样式 |
|---|---|
| start | 内部的子组件将从非主轴起始位置开始排列（正向排列） |
| end | 内部的子组件将从非主轴末尾位置开始排列（反向排列） |
crossAxisAlignment.png
- textDirection:这个属性用来控制 Row 布局中内部子组件的摆放顺序:
| 属性名称 | 样式 |
|---|---|
| TextDirection.ltr | 从左至右排列 |
| TextDirection.rtl | 从右至左排列 |
textDirection.png
- verticalDirection:这个属性用来控制 Column 布局中内部子组件的摆放顺序:
| 属性名称 | 样式 |
|---|---|
| VerticalDirection.up | 从下至上排列 |
| VerticalDirection.down | 从上至下排列 |
verticalDirection.png
- textBaseline:这个属性也是用来设置子组件对齐的，只不过对齐的是字符的基线:
| 属性名称 | 样式 |
|---|---|
| TextBaseline.ideographic | 用于对齐表意字符的水平线 |
| TextBaseline.alphabetic | 用于对齐字母字符的水平线 |
需要注意的是,这个需要配合 crossAxisAlignment 属性来使用，来看一下具体的效果.
textBaseline.png
想了解更多Flutter学习知识请联系:QQ(814299221)
