蓁祎家进步中

# 布局组件

返回：自带组件

# 水平、垂直布局组件

Row&Column

Row 是将子组件以水平方式布局的组件， Column 是将子组件以垂直方式布局的组件。项目中 90% 的页面布局都可以通过 Row 和 Column 来实现。

# 主轴（ MainAxis ） 和 交叉轴（ CrossAxis ）

主轴就是与组件布局方向一致的轴，交叉轴就是与主轴方向垂直的轴。

# mainAxisAlignment

此属性表示主轴方向的对齐方式，默认值为 start，表示从组件的开始处布局，此处的开始位置和 textDirection 属性有关，textDirection 表示文本的布局方向，其值包括 ltr（从左到右） 和 rtl（从右到左），当 textDirection = ltr 时，start 表示左侧，当 textDirection = rtl 时，start 表示右侧，

  • spaceAround ：第一个子控件距开始位置和最后一个子控件距结尾位置是其他子控件间距的一半。
  • spaceEvenly ： 所有间距一样。

# crossAxisAlignment

交叉轴对齐方式默认是居中。Row 控件的高度是依赖子控件高度，因此子控件高都一样时，Row 的高和子控件高相同，此时是无法体现交叉轴对齐方式，

# mainAxisSize

表示主轴尺寸，有 min 和 max 两种方式，默认是 max**。**min 表示尽可能小，max 表示尽可能大。

# textDirection&verticalDirection

  • textDirection 表示子组件主轴布局方向，值包括 ltr（从左到右） 和 rtl（从右到左）
  • verticalDirection 表示子组件交叉轴布局方向：
    • up ：从底部开始，并垂直堆叠到顶部，对齐方式的 start 在底部，end 在顶部。
    • down： 与 up 相反。

# 叠加布局组件

Stack 和 IndexedStack

叠加布局组件包含 Stack 和 IndexedStack，Stack 组件将子组件叠加显示，根据子组件的顺序依次向上叠加，

# Stack

  • Stack 对未定位（不被Positioned包裹）子组件的大小由 fit 参数决定，默认值是 StackFit.loose ，表示子组件自己决定，StackFit.expand 表示尽可能的大，
Stack(
  fit: StackFit.expand,
  children: <Widget>[
    Container(
      height: 200,
      width: 200,
      color: Colors.red,
    ),
    Container(
      height: 170,
      width: 170,
      color: Colors.blue,
    ),
    Container(
      height: 140,
      width: 140,
      color: Colors.yellow,
    )
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

20200623220128.png

效果只有黄色（最后一个组件的颜色），并不是其他组件没有绘制，而是另外两个组件被黄色组件覆盖。

  • Stack 对未定位（不被 Positioned 包裹）子组件的对齐方式由 alignment 控制，默认左上角对齐
  • 如果子组件超过 Stack 边界由 overflow 控制，默认是裁剪

# IndexedStack

是 Stack 的子类，Stack 是将所有的子组件叠加显示，而 IndexedStack 通过 index 只显示指定索引的子组件

# 流式布局组件

Wrap

Wrap 为子组件进行水平或者垂直方向布局，且当空间用完时，Wrap 会自动换行，也就是流式布局。

  • direction 属性控制布局方向，默认为水平方向
  • alignment 属性控制主轴对齐方式，
    • 对齐方式只对有剩余空间的行或者列起作用，例如水平方向上正好填充完整，则不管设置主轴对齐方式为什么，看上去的效果都是铺满。
  • crossAxisAlignment 属性控制交叉轴对齐方式，
    • 对齐方式只对有剩余空间的行或者列起作用，例如水平方向上正好填充完整，则不管设置主轴对齐方式为什么，看上去的效果都是铺满。

20200623220340.jpg

  • runAlignment 属性控制 Wrap 的交叉抽方向上每一行的对齐方式

20200623220352.jpg

# runAlignment 和 alignment 的区别

  • alignment ：是主轴方向上对齐方式，作用于每一行。
  • runAlignment ：是交叉轴方向上将每一行看作一个整体的对齐方式。

# spacing 和 runSpacing

属性控制 Wrap 主轴方向和交叉轴方向子控件之间的间隙

# 自定义布局组件

Flow

大部分情况下，不会使用到 Flow ，但 Flow 可以调整子组件的位置和大小，结合 Matrix4 绘制出各种酷炫的效果。

Flow 组件对使用转换矩阵操作子组件经过系统优化，性能非常高效。

  • delegate 控制子组件的位置和大小
    • delegate 要继承 FlowDelegate，重写 paintChildren 和 shouldRepaint 函数，上面直接绘制子组件
class SimpleFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; ++i) {
      context.paintChild(i);
    }
  }

  @override
  bool shouldRepaint(SimpleFlowDelegate oldDelegate) {
    return false;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

20200623215141.png

只看到一种颜色并不是只绘制了这一个，而是叠加覆盖了，和 Stack 类似，下面让每一个组件有一定的偏移

class SimpleFlowDelegate extends FlowDelegate {
  @override
  void paintChildren(FlowPaintingContext context) {
    for (int i = 0; i < context.childCount; ++i) {
      context.paintChild(i,transform: Matrix4.translationValues(0,i*30.0,0));
    }
  }

  @override
  bool shouldRepaint(SimpleFlowDelegate oldDelegate) {
    return false;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

20200623215144.png