Row、Column 是 Flutter 中最常用的这布局 Weight 了。Row = 一行、Column = 一列，可以像 android 那样设置轻松的给宽高设置 match_parent、wrap_content、具体数值，还能设置权重百分比，甚至还拥有 android ConstraintLayout 约束布局 chain 那样约束 weight 在主方向上的排布，是 Flutter 最灵活的布局 Weight了，不会 Row、Column Flutter 你是寸步难行...
Row、Column 不仅要学通，更要学精
Row、Column 属性
Row、Column 同是继承自 Flex，除了方向子 view 不一样，其他一模一样，学一个就行了
Row({
Key key,
// 主轴大小
MainAxisSize mainAxisSize = MainAxisSize.max,
// 主轴对齐方式
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
// 交叉轴对齐方式
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
// 没用
TextDirection textDirection,
// 子 view 排序，支持正序和倒序
VerticalDirection verticalDirection = VerticalDirection.down,
// 基线对齐
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
Row、Column 使用 主轴，交叉轴 代替了 android 传统的 宽、高 概念
有意思的是 Row、Column 没有宽、高 的概念，只有主轴，交叉轴，这是为啥，还不是因为 Row、Column 他俩是有方向的，所有这么改了一下，其实本质还是宽、高换个称呼罢了
-
Row- 横向排列子 view，主轴MainAxis=width，交叉轴CrossAxis=height -
Column- 纵向排列子 view，主轴MainAxis=height，交叉轴CrossAxis=width
大家记住这个顺序就成了，但是蛋疼的地方就是 Row、Column 之能给主轴设置大小，交叉轴不行，这样实际有时候很麻烦，要再外面再套层容器才行
Row、Column 的 宽 高 设置不支持直接设置具体数值
Row、Column 只能支持下面2种宽、高设置：
-
MainAxisSize.max= match_parent -
MainAxisSize.min= wrap_content
对的只能用 match_parent 或是 wrap_content，想要设置具体数值的宽高的话得再外面再用 Container 包一层
Row、Column 支持 chain 式样的 weight 排布
mainAxisAlignment 属性描述 、Column 里的 weight 排序，传统的 居中，靠左，靠右排序 就不说了，重点看下chain 链式排序，Flutter 支持3种：
-
spaceEvenly- 平局分布 weight -
spaceAround- 首位的 weight 距离左右 2边的边距是其他 weight 边距的 1/2 -
spaceBetween- 首位的 weight 距离左右 2边没有边距
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints.expand(),
color: Colors.yellowAccent,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("spaceEvenly"),
ARow(),
Text("spaceAround"),
BRow(),
Text("spaceBetween"),
CRow(),
],
),
);
}
}
class ARow extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
AText(),
AText(),
AText(),
],
);
}
}
最后
其他的属性其实一般用不到，大家熟悉上面就行了，Row、Column 的缺点也不少：
- 最麻烦的就是不能同时设置宽高，只能设置一个，还不能设置具体数值，这的确是太蛋疼了，我们想要实现以前 match_parent、match_parent 的效果必须借助其他容器
- 不能换行，换列...
实际使用起来挺麻烦的，繁琐的，这也是 Flutter 的特色，UI写起来和 web 一样那一层套一层的...
