Flutter中如何在Stack组件内固定顶部图片且展开列表可覆盖该图片

要实现顶部固定图片、列表默认在图片下方、展开时覆盖图片的效果，采用Stack层叠布局实现，具体修改逻辑和代码如下：

实现逻辑 #

1. 以Stack作为页面根容器，底层放固定在顶部的图片，上层放可动态调整位置和高度的列表容器
2. 列表容器默认上边距等于图片高度，刚好位于图片下方；展开时上边距变为0，同时高度拉伸到设定的最大值，自然向上延伸覆盖顶部图片
3. 所有变化通过动画过渡，保证效果流畅

效果预览 #

• 初始收缩状态
  
• 展开覆盖状态
  

完整修改代码 #

// 首先在State类中定义需要的变量
bool _isExpanded = false;
double _height = 200; // 可自定义收缩状态下的列表高度
String buttonText = "展开";

@override
Widget build(BuildContext context) {
  double maxHeight = MediaQuery.of(context).size.height;
  double imageHeight = maxHeight * 0.3; // 可自定义顶部图片高度
  double marginTop = _isExpanded ? 0 : imageHeight; // 动态上边距

  return Scaffold(
    body: Stack(
      children: [
        // 底层：固定在顶部的图片
        Align(
          alignment: Alignment.topCenter,
          child: Hero(
            tag: "imageHero",
            child: ClipRRect(
              borderRadius: const BorderRadius.only(
                bottomLeft: Radius.circular(30),
                bottomRight: Radius.circular(30),
              ),
              child: Image.asset(
                'assets/images/punjabi_egg_curry1.jpeg',
                height: imageHeight,
                width: double.infinity,
                fit: BoxFit.cover,
                alignment: Alignment.topCenter,
              ),
            ),
          ),
        ),
        // 上层：可展开的列表容器
        Padding(
          padding: const EdgeInsets.fromLTRB(5, 20, 5, 0),
          child: ClipRect(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
              child: Card(
                color: Colors.transparent,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.only(bottom: 10),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      AnimatedContainer(
                        constraints: BoxConstraints(
                          maxHeight: maxHeight * 0.85,
                        ),
                        margin: EdgeInsets.only(top: marginTop),
                        height: _height,
                        duration: const Duration(milliseconds: 300),
                        decoration: BoxDecoration(
                          color: Colors.transparent,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        // 列表内部加滚动，避免内容溢出
                        child: SingleChildScrollView(
                          child: Steps(),
                        ),
                      ),
                      ElevatedButton(
                        onPressed: _updateSize,
                        child: Text(buttonText),
                        style: ElevatedButton.styleFrom(
                          padding: const EdgeInsets.symmetric(
                            vertical: 10,
                            horizontal: 20,
                          ),
                          primary: kSilver,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20),
                          ),
                          onPrimary: Colors.black,
                          textStyle: const TextStyle(
                            color: Colors.black,
                            fontSize: 22,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

// 按钮点击切换状态的方法
void _updateSize() {
  double maxHeight = MediaQuery.of(context).size.height;
  setState(() {
    _isExpanded = !_isExpanded;
    if (_isExpanded) {
      _height = maxHeight * 0.85;
      buttonText = "收起";
    } else {
      _height = 200; // 收缩状态高度可自定义
      buttonText = "展开";
    }
  });
}

关键调整说明 #

• 去掉了原代码中多余的Align、SingleChildScrollView、Column嵌套，避免限制Stack的层叠覆盖能力
• 新增动态marginTop属性，配合高度动画实现列表向上延伸覆盖图片的效果
• 给Steps组件外层加了SingleChildScrollView，避免列表内容过多时溢出
• 明确了图片的宽高配置，保证顶部占位稳定

内容的提问来源于stack exchange，提问作者who-aditya-nawandar