这是我参与11月更文应战的第5天，活动详情检查：2021最终一次更文应战
1.布局
1.1 Row & Column & Stack
Row能够沿水平方向摆放其子widget,也便是横向布局。Column能够在垂直方向摆放其子组件，能够理解为纵向布局。而Stack答应子组件堆叠，是层叠布局，能够理解为Z轴。
1.2 Alignment
class LayoutDemo extends StatelessWidget {
const LayoutDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
alignment: const Alignment(0,0),
child: Row(
children: [
Icon(Icons.add,size: 30,),
Icon(Icons.ac_unit,size: 60,),
Icon(Icons.baby_changing_station,size: 90,),
],
),
);
}
}
运转后得到下面的图，这里发现x对row没有影响了，由于container有多宽，row就有多宽，所以X对row就没有影响了。从这里也能够推出Y对Column没有影响，而Stack则是都有影响。
return Container(
color: Colors.yellow,
alignment: const Alignment(0, 0),
child: Column(
children: [
Container(
color: Colors.red,
child: Icon(
Icons.add,
size: 90,
),
),
Container(
color: Colors.blue,
child: Icon(
Icons.ac_unit,
size: 60,
),
),
Container(
color: Colors.white,
child: Icon(
Icons.baby_changing_station,
size: 30,
),
),
],
),
);
运转后发现的确Y对Column没有影响。
下面是Stack的情况，看到的确都有影响。
1.3 主轴
在row中，主轴是X轴，默许朝右，在Column中，主轴是Y轴，默许朝下，主轴对齐特点主要有：start，end，center，spaceBetween，spaceAround，spaceEvenly。运用text Direction的话 能够改变主轴的方向。
Start便是正常的左对齐，这里就不测试了。
给Row的mainAxisAlignment赋值为MainAxisAlignment.end。
mainAxisAlignment: MainAxisAlignment.end,
运转后得到下图，发现向右对齐了。
给Row的mainAxisAlignment赋值为MainAxisAlignment.center。
给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceBetween。
给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceBetween,这里是将剩余的空间均匀散布到控件之间。
给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceAround，这里是将剩余的空间均匀散布到小控件周围。
给Row的mainAxisAlignment赋值为MainAxisAlignment.spaceEvenly。这里是将剩余的空间和小部件均匀分。
1.4 穿插轴
穿插轴便是垂直与主轴方向的轴。
将Row里边的crossAxisAlignment设为CrossAxisAlignment.start,能够看到三个icon的头部是对齐的。
将Row里边的crossAxisAlignment设为CrossAxisAlignment.end,能够看到三个icon的底部是对齐的。
将Row里边的crossAxisAlignment设为CrossAxisAlignment.center,能够看到三个icon的中心是对齐的。
CrossAxisAlignment.baseline,需要搭配textBaseline运用，否则会报错。将icons改成文字来看效果。发现这个是文字的底部对齐了。
1.5 Expanded
Expanded 只能作为 Flex 的孩子（否则会报错），它能够按份额“扩伸”Flex子组件所占用的空间。由于 Row和Column 继都承自Flex，所以 Expanded 也能够作为它们的孩子。所有的Expanded依照其 flex 的份额来分割主轴的悉数空闲空间。 将Row的children里边的Container用Expanded包起来。
return Container(
color: Colors.yellow,
alignment: const Alignment(0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Container(
color: Colors.red,
child: Text(
'你好',
style: TextStyle(fontSize: 20),
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Text(
'女吼',
style: TextStyle(fontSize: 40),
),
),
),
Expanded(
child: Container(
color: Colors.white,
child: Text(
'类猴',
style: TextStyle(fontSize: 60),
),
),
),
],
),
);
运转后看到三个文本平分了row的主轴。如果空间不够用则会主动换行。在Expanded里边，主轴方向设置大小将没有意义，也便是说，在Row里边设置width不会生效，在column里边设置height不会生效。
4. 总结
- 布局部件
- Center。让子部件在本部件的居中方位显现
- Container中相对方位特点
- Alignment。参数：x 和 y
- 原点在中心方位
- Row&Column
- 横向布局Row。
- 子部件依照主轴方向（横向）摆放。主轴方向从左到右
- 纵向布局Column。
- 子部件依照主轴方向（纵向）摆放。主轴方向从上到下
- 每一个UI部件都能够当作一个矩形的“盒子”
- 每一个盒子都有外边距Margin和内边距padding.
- 主轴：MainAxisAlignment
- spaceBetween: 剩余的空间均匀散布到小部件之间！！
- spaceAround: 剩余的空间均匀散布到小部件周围！！
- spaceEvenly：剩余的空间和小部件一同均匀分！！
- start 向主轴开端的方向对齐。
- end 向主轴完毕的方向对齐。
- center 主轴方向居中对齐。
- 穿插轴：CrossAxisAlignment 垂直于主轴方向
- baseline：文字底部对齐
- center：穿插轴方向居中对齐。
- end：向穿插轴完毕的方向对齐。；
- start：向穿插轴开端的方向对齐；
- stretch：填满穿插轴方向；
- 横向布局Row。
- Expanded 填充布局
- 在主轴方向不会剩余空隙。将被Expanded包装的部件进行拉伸和紧缩
- 主轴横向，宽度设置没有意义
- 主轴纵向，高度设置没有意义
- 当Text被Expanded包装后，文字能够主动换行。这也被称作灵敏布局。
