本节目标

  • Stack
  • IndexedStack
  • Positioned

Stack 和 IndexStack 都是层叠布局方式，类似于 Android 里的 FrameLayout 帧布局，内部子元素是有层级堆起来的。

Stack 继承自 MultiChildRenderObjectWidget，Stack 也是多子元素的一个组件之一（内部可以包含多个子元素）。

而 IndexedStack 继承自 Stack，扩展了 Stack 的一些特性。它的作用是显示第 index 个子元素，其他子元素都是不可见的。所以 IndexedStack 的尺寸永远是跟最大的子元素尺寸一致。

Stack 的布局行为，是根据子元素是 positioned 还是 non-positioned 来区分的：

对于 positioned 的子元素，它们的位置会根据所设置的 top、bottom、right 或 left 属性来确定，这几个值都是相对于 Stack 的左上角；
对于 non-positioned 的子元素，它们会根据 Stack 的 aligment 来设置位置。
Stack 布局的子元素层级堆叠顺序：最先布局绘制的子元素在最底层，越后绘制的越在顶层。类似于 Web 中的 z-index。

Stack

1
2
3
4
5
6
7
8
9
10
11
12
13
Stack({
    Key key,
    // 对齐方式，默认是左上角（topStart）
    this.alignment = AlignmentDirectional.topStart,
    // 对齐方向
    this.textDirection,
    // 定义如何设置无定位子元素尺寸，默认为loose
    this.fit = StackFit.loose,
    // 超过的部分子元素处理方式
    this.overflow = Overflow.clip,
    // 子元素
    List<Widget> children = const <Widget>[],
  })
  • alignment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 左上角
static const Alignment topLeft = Alignment(-1.0, -1.0);

// 主轴顶部对齐，交叉轴居中
static const Alignment topCenter = Alignment(0.0, -1.0);

// 主轴顶部对齐，交叉轴偏右
static const Alignment topRight = Alignment(1.0, -1.0);

// 主轴居中，交叉轴偏左
static const Alignment centerLeft = Alignment(-1.0, 0.0);

// 居中
static const Alignment center = Alignment(0.0, 0.0);

// 主轴居中，交叉轴偏右
static const Alignment centerRight = Alignment(1.0, 0.0);

// 主轴底部对齐，交叉轴偏左
static const Alignment bottomLeft = Alignment(-1.0, 1.0);

// 主轴底部对齐，交叉轴居中
static const Alignment bottomCenter = Alignment(0.0, 1.0);

// 主轴底部对齐，交叉轴偏右
static const Alignment bottomRight = Alignment(1.0, 1.0);
  • fit
1
2
3
4
5
6
7
8
9
10
enum StackFit {
  // 子元素宽松的取值，可以从min到max的尺寸
  loose,

  // 子元素尽可能的占用剩余空间，取max尺寸
  expand,

  // 不改变子元素的约束条件
  passthrough,
}
  • overflow
1
2
3
4
5
6
7
enum Overflow {
  // 超出部分不会被裁剪，正常显示
  visible,

  // 超出部分会被裁剪
  clip,
}

IndexedStack

1
2
3
4
5
6
7
8
9
10
IndexedStack({
    Key key,
    AlignmentGeometry alignment = AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit sizing = StackFit.loose,
    // 多了一个索引，索引的这个元素显示，其他元素隐藏
    this.index = 0,
    // 子元素
    List<Widget> children = const <Widget>[],
  })

Positioned

1
2
3
4
5
6
7
8
9
10
const Positioned({
  Key key,
  this.left, // 上下左右位置
  this.top,
  this.right,
  this.bottom,
  this.width, // 宽高
  this.height,
  @required Widget child,
})

代码

https://github.com/ducafecat/flutter-learn/tree/master/state_less_ful_app

参考

© 猫哥

https://ducafecat.tech