如何在Modal Bottom Sheet中固定标题并解决列表滚动溢出问题？

你的问题核心是布局约束缺失：Column默认会让子组件无限延伸，而SingleChildScrollView在没有明确高度限制时，无法正确计算滚动区域，加上Modal Bottom Sheet默认高度有限，最终导致溢出且无法滚动。以下是修复方案：

修改步骤 #

• 给showModalBottomSheet添加isScrollControlled: true，允许弹窗占用更多屏幕空间
• 用Expanded包裹SingleChildScrollView，让它填充标题下方的剩余空间
• 移除多余的空Text，用SizedBox做更规范的间距

修复后的完整代码 #

/// 返回带折叠父分类的列表选择器
static Widget foldingSuperCategoryListPicker({required Function(ClassifiedAdCategory) onTap}) {
  return Column(
    children: ClassifiedAdSuperCategory.values.map((s) {
      final children = ClassifiedAdCategory.values
          .where((c) => c.superCategory == s)
          .map((c) => ListTile(title: Text("$c"), onTap: () => onTap(c)))
          .toList();

      return ExpansionTile(title: Text("$s"), children: children);
    }).toList(),
  );
}

/// 在Modal Bottom Sheet中打开可折叠父分类的列表选择器
static showModalBottomSheetListPicker(BuildContext context, {required Function(ClassifiedAdCategory) onTap}) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true, // 允许弹窗占用更多屏幕高度
    shape: const RoundedRectangleBorder( // 可选：美化弹窗顶部圆角
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    builder: (context) => Padding(
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisSize: MainAxisSize.min, // 让Column适应内容高度
        children: [
          Text(i18n_Select_a_category.i18n),
          const SizedBox(height: 16), // 规范的间距设置
          Expanded(
            child: SingleChildScrollView(
              child: foldingSuperCategoryListPicker(onTap: onTap),
            ),
          ),
        ],
      ),
    ),
  );
}

关键改动说明 #

1. isScrollControlled: true：解除Modal Bottom Sheet的默认高度限制，让它可以根据内容调整高度，避免内容直接溢出屏幕。
2. Expanded包裹SingleChildScrollView：在Column中，Expanded会强制子组件填充剩余可用空间，这样SingleChildScrollView就有了明确的高度约束，能正确识别滚动区域。
3. mainAxisSize: MainAxisSize.min：让Column只占用必要的高度，配合isScrollControlled实现自适应弹窗高度。

内容的提问来源于stack exchange，提问作者Stéphane de Luca