Flutter：如何让[Stack]组件像[Column]一样布局子组件？

核心结论 #

可以通过手动控制子组件位置，让Stack实现类似Column的垂直排列效果，同时避免Column因SizeTransition动画触发的全量重建问题。

问题根源解释 #

Column是基于子组件尺寸动态计算布局的组件：当SizeTransition触发动画改变子组件尺寸时，Column需要重新计算所有子组件的位置和自身尺寸，进而触发整个Column子树的重建。而Stack的子组件默认是独立堆叠（左上角对齐），除非使用Positioned绑定父容器尺寸，否则子组件的尺寸变化不会触发Stack的布局重计算，因此不会引发全量重建。

实现方法 #

要让Stack模拟Column的垂直布局，需要手动控制每个子组件的垂直偏移，常用两种方式：

1. 固定高度的静态布局

如果子组件高度已知，直接用Positioned指定top值累加排列：

Stack(
  children: [
    // 对应Column第一个子项
    Positioned(
      top: 0,
      left: 0,
      right: 0,
      child: Container(height: 50, color: Colors.red),
    ),
    // 带SizeTransition的子项，放在第一个子组件下方
    Positioned(
      top: 50, // 等于第一个子组件的高度
      left: 0,
      right: 0,
      child: SizeTransition(
        sizeFactor: _animationController,
        axis: Axis.vertical,
        child: Container(height: 100, color: Colors.blue),
      ),
    ),
    // 对应Column第三个子项，放在第二个子组件下方
    Positioned(
      top: 150, // 50+100
      left: 0,
      right: 0,
      child: Container(height: 50, color: Colors.green),
    ),
  ],
)

2. 动态高度的自适应布局

如果子组件高度动态变化，用GlobalKey获取子组件实际尺寸，再动态计算top值：

final _firstChildKey = GlobalKey();
double _firstChildHeight = 0;

@override
void initState() {
  super.initState();
  // 组件渲染后获取高度
  WidgetsBinding.instance.addPostFrameCallback((_) {
    final renderBox = _firstChildKey.currentContext?.findRenderObject() as RenderBox?;
    if (renderBox != null) {
      setState(() {
        _firstChildHeight = renderBox.size.height;
      });
    }
  });
}

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      Container(
        key: _firstChildKey,
        height: 50,
        color: Colors.red,
      ),
      Positioned(
        top: _firstChildHeight,
        left: 0,
        right: 0,
        child: SizeTransition(
          sizeFactor: _animationController,
          axis: Axis.vertical,
          child: Container(height: 100, color: Colors.blue),
        ),
      ),
    ],
  );
}

注意事项 #

• Stack手动布局需要维护子组件的位置关系，子组件数量较多时会增加代码复杂度；
• 如果需要类似Column的mainAxisAlignment或crossAxisAlignment效果，可结合Align组件调整子组件的水平对齐方式；
• 若要完全复用Column的布局逻辑，也可以考虑将SizeTransition包裹在RepaintBoundary中，限制重建范围，避免Column全量重建（这是另一种解决原问题的思路）。

内容的提问来源于stack exchange，提问作者user19728436