Flutter：在可滚动底部弹窗上方显示SnackBar并保留ListView.builder的shrinkWrap特性

当给底部弹窗设置isScrollControlled: true，同时在内部用Scaffold包裹带shrinkWrap: true的ListView.builder时，会出现ListView无法收缩到内容高度的问题，核心原因是：

• isScrollControlled: true会让BottomSheet占据屏幕的可用高度，内部的Scaffold组件默认会撑满这个高度
• 此时ListView的父容器（Scaffold的body）没有明确的高度约束，shrinkWrap: true的逻辑无法生效，ListView会自动占满父容器的剩余空间

下面是两种可行的解决办法：

方法1：移除BottomSheet内部的Scaffold #

如果不需要Scaffold的全局特性（比如全局Drawer），完全可以直接用Column+AppBar（或自定义头部）来替代，这样能让ListView的shrinkWrap正常工作：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 自定义头部或直接使用AppBar
        AppBar(
          title: const Text('底部弹窗'),
          automaticallyImplyLeading: false,
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
        ),
        // 内容区：shrinkWrap生效，ListView高度随内容变化
        ListView.builder(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(), // 内容少时不需要滚动
          itemCount: 5,
          itemBuilder: (context, index) {
            return ListTile(title: Text('列表项 $index'));
          },
        ),
      ],
    );
  },
);

如果内容较多需要滚动，只需要去掉physics: NeverScrollableScrollPhysics()，同时给ListView套一层Expanded，让它在BottomSheet的可用空间内滚动：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        AppBar(title: const Text('底部弹窗')),
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
            itemCount: 30,
            itemBuilder: (context, index) {
              return ListTile(title: Text('列表项 $index'));
            },
          ),
        ),
      ],
    );
  },
);

方法2：保留Scaffold但添加高度约束 #

如果必须使用Scaffold（比如需要集成AppBar的某些全局逻辑），可以给Scaffold设置一个明确的高度约束，让ListView的shrinkWrap能正确识别内容高度：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    // 用SizedBox限制Scaffold的最大高度
    return SizedBox(
      height: MediaQuery.of(context).size.height * 0.7, // 取屏幕高度的70%
      child: Scaffold(
        appBar: AppBar(title: const Text('底部弹窗')),
        body: ListView.builder(
          shrinkWrap: true,
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(title: Text('列表项 $index'));
          },
        ),
      ),
    );
  },
);

或者用LayoutBuilder动态获取BottomSheet的可用空间，再约束ListView的高度：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Scaffold(
          appBar: AppBar(title: const Text('底部弹窗')),
          body: SizedBox(
            height: constraints.maxHeight - kToolbarHeight, // 减去AppBar高度
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (context, index) {
                return ListTile(title: Text('列表项 $index'));
              },
            ),
          ),
        );
      },
    );
  },
);

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