Flutter中ModalBottomSheet内嵌ListView如何实现顶部固定不滚动分割条

DevOps 小满

2026-10-5

Flutter ModalBottomSheet 固定顶部区域+可滚动ListView实现方案

报错原因

直接在ModalBottomSheet内嵌套Column+ListView结构时，默认isScrollControlled: false限制了内部滚动上下文，同时ListView没有明确的高度约束，会触发无限布局高度异常。你之前将isScrollControlled设为false属于错误配置，该参数需要开启才能支持自定义内部滚动结构。

实现核心逻辑

弹窗根节点使用Column，设置mainAxisSize: MainAxisSize.min实现高度自适应
顶部固定区域直接作为Column的一级子节点，天然不跟随内部列表滚动
ListView外层包裹Expanded，强制列表只占用Column剩余可用高度，避免高度溢出

完整可运行代码

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 开启自定义滚动支持
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
  ),
  builder: (context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 顶部固定分割条区域
        Container(
          height: 4,
          width: 32,
          margin: const EdgeInsets.symmetric(vertical: 12),
          decoration: BoxDecoration(
            color: Colors.grey.shade400,
            borderRadius: BorderRadius.circular(2),
          ),
        ),
        // 可滚动列表区域
        Expanded(
          child: ListView.builder(
            physics: const AlwaysScrollableScrollPhysics(),
            itemCount: 20,
            itemBuilder: (context, index) => ListTile(
              title: Text('列表项 ${index + 1}'),
            ),
          ),
        )
      ],
    );
  },
);