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-汇总

推荐阅读更多精彩内容