Flutter(一)–布局机制、布局步骤、水平和垂直布局、组件大小动态调整

布局机制

flutter的布局机制是组件，flutter中几乎一切都是组件，除了图片、文字等，还有用来排列、限制、对齐这些可见组件的行、列、网格等（可了解为系统样式）。

图层图示

布局步骤

1. 选择布局组件，

   • Center: 只能容纳单个组件

   • Container：通用组件，可增加：边距、背景色等样式；只能容纳单个组件

   • Row：多个组件同行；可容纳多个组件

   • Column：多个组件同列；可容纳多个组件

   • 等

2. 创立可见内容组件

   • Text：文本

   • Image：图片

   • Icon: 图标

   • 等

3. 将可见组件增加到布局组件里，通过将内容组件传递给布局组件的某个属性来完成

   • child: 单个组件增加布局时使用。例如：Center、Container

   • children 多个组件增加布局时使用。例如：Row，Column

   • 等

4. 将布局组件增加到页面组件里，一般在build方法里完成。

水平和垂直布局

通过相互嵌套完成复杂的布局,对于复杂布局尽量拆解多个组件

水平和垂直对齐方式

对齐方向

• 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,}

子组件相对大小 Expanded

在同一层级中的Expanded组件，通过控制参数flex来调整同一父组件下子组件的大小比例。