Flutter如何实现Animated Container展开时覆盖灰色容器内容？

当前代码中蓝色容器与灰色容器内的文本处于同一个Column线性布局中，垂直排列的特性导致蓝色容器展开时会向上挤压文本内容。要实现覆盖效果，Stack组件是最直观且推荐的方案——它是Flutter中层叠布局的核心组件，能让子组件在同一空间内分层显示。

修改思路 #

• 将灰色容器内的Column替换为Stack，让文本和蓝色容器可以层叠展示
• 文本组件保持在灰色容器底部位置，蓝色容器作为上层组件，通过动态调整高度实现展开/收起，从而覆盖下方文本

修改后的完整代码 #

class _TestScreenState extends State<TestScreen> {
  bool isExpanded = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: LayoutBuilder(
        builder: (p0, p1) {
          final widthScreen = p1.maxWidth;
          final heightScreen = p1.maxHeight;
          final amberHeight = heightScreen * 0.32;

          return Column(
            children: [
              Container(
                color: Colors.amber,
                width: widthScreen,
                height: amberHeight,
                child: const Row(
                  children: [
                    IconButton(
                      iconSize: 30,
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.grey,
                  child: Stack(
                    alignment: Alignment.bottomCenter,
                    children: [
                      // 灰色容器底部的文本内容（底层）
                      Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: const [
                          Text("line 1"),
                          Text("line 2"),
                          Text("line 3"),
                        ],
                      ),
                      // 可展开的蓝色容器（上层，覆盖文本）
                      AnimatedContainer(
                        duration: const Duration(milliseconds: 300),
                        width: widthScreen,
                        height: isExpanded 
                            ? heightScreen - amberHeight 
                            : heightScreen * .2,
                        color: Colors.blue,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                IconButton(
                                  iconSize: 30,
                                  color: Colors.black,
                                  icon: const Icon(Icons.ac_unit),
                                  onPressed: () {
                                    setState(() {
                                      isExpanded = !isExpanded;
                                    });
                                  },
                                )
                              ],
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          );
        },
      ),
    );
  }
}

关键修改说明 #

• 使用Stack替代原灰色容器内的Column，通过alignment: Alignment.bottomCenter确保文本和蓝色容器都对齐容器底部
• 蓝色容器设置width: widthScreen，保证横向铺满整个屏幕
• 蓝色容器的高度计算逻辑保持不变，但现在它作为Stack的上层组件，展开时会逐渐覆盖下方文本，而非挤压布局

内容的提问来源于stack exchange，提问作者Lucas Barreto Luz