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

布局机制

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

image.png

布局步骤

1. 选择布局组件，

   • Center: 只能容纳单个组件

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

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

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

   • 等

2. 创建可见内容组件

   • Text：文本

   • Image：图片

   • Icon: 图标

   • 等

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

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

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

   • 等

4. 将布局组件添加到页面组件里，一般在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,
}

子组件相对大小 Expanded

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

注意点：如果单独使用Expanded，该组件会占据父组件剩余所有空间

传送门:

Flutter-汇总