布局机制
flutter的布局机制是组件，flutter中几乎一切都是组件，除了图片、文字等，还有用来排列、限制、对齐这些可见组件的行、列、网格等（可理解为系统样式）。
image.png
布局步骤
- 选择布局组件，
- Center: 只能容纳单个组件
- Container：通用组件，可添加：边距、背景色等样式；只能容纳单个组件
- Row：多个组件同行；可容纳多个组件
- Column：多个组件同列；可容纳多个组件
- 等
- 创建可见内容组件
- Text：文本
- Image：图片
- Icon: 图标
- 等
- 将可见组件添加到布局组件里，通过将内容组件传递给布局组件的某个属性来完成
- child: 单个组件添加布局时使用。例如：Center、Container
- children 多个组件添加布局时使用。例如：Row，Column
- 等
- 将布局组件添加到页面组件里，一般在build方法里完成。
水平和垂直布局
通过相互嵌套完成复杂的布局,对于复杂布局尽量拆解多个组件
水平和垂直对齐方式
image.png
- mainAxisAlignment 主轴方向对齐，（并不是主轴左右）
- row -- 水平方向
- colim -- 垂直方向
- crossAxisAlignment 交叉轴方向对齐，（并不是主轴左右）
- row -- 垂直方向
- colim -- 水平方向
- 参数说明：
enum MainAxisAlignment {
//将子控件放在主轴的开始位置
start,
//将子控件放在主轴的结束位置
end,
//将子控件放在主轴的中间位置
center,
//将主轴空白位置进行均分，排列子元素，手尾没有空隙
spaceBetween,
//将主轴空白区域均分，使中间各个子控件间距相等，首尾子控件于外边间距为中间子控件间距的一半
spaceAround,
//将主轴空白区域均分，使各个子控件间距相等
spaceEvenly,
}enum CrossAxisAlignment {
//将子控件放在交叉轴的开始位置
start,
//将子控件放在交叉轴的结束位置
end,
//将子控件放在交叉轴的中间位置
center,
//将子控件放在交叉轴的方向拉伸
stretch,
//沿着十字轴
baseline,
}组件内容大小 mainAxisSize
- 参数说明：
enum MainAxisSize {
//子元素尽量扩大化展示，占据满足父元素布局的全部空间
max,（默认）
//子元素尽量紧凑的展示，空间尽可能满足所有子元素即可
min,
}
