Flutter动态高度BottomSheet内嵌水平滚动ListView报错解决

问题根源 #

• Wrap组件无固定尺寸约束，内部Expanded无法获取可用空间，导致水平ListView因缺少明确垂直高度约束抛出Failed assertion: ... hasSize错误。
• 水平滚动的ListView必须拥有明确的垂直高度约束，Flutter才能确定其渲染尺寸。

修复方案 #

用Column替代Wrap实现自适应高度布局，同时给水平ListView指定明确高度：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return SafeArea(
      child: Column(
        mainAxisSize: MainAxisSize.min, // 让Column高度完全适配子内容
        children: [
          ListTile(title: Text('Foo')),
          ListTile(title: Text('Bar')),
          // 给水平列表指定明确高度，解决尺寸约束问题
          SizedBox(
            height: 100, // 根据需求调整高度，匹配Card的实际尺寸
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 20, // 限制最多20个项
              padding: EdgeInsets.symmetric(horizontal: 8),
              itemBuilder: (_, index) {
                return Card(
                  child: Padding(
                    padding: EdgeInsets.all(8),
                    child: Text("Item $index"),
                  ),
                );
              },
            ),
          ),
          SizedBox(height: 8), // 底部留白优化布局体验
        ],
      ),
    );
  },
);

关键改动说明 #

1. 替换Wrap为Column：Column配合mainAxisSize: MainAxisSize.min，能让BottomSheet高度严格适配内部所有子组件的总高度，实现内容自适应。
2. 给水平ListView添加高度约束：用SizedBox包裹水平列表，明确指定垂直高度，彻底解决尺寸断言错误。
3. 限制列表项数量：将itemCount设为20，符合需求中“最多20个项”的要求。
4. 添加留白优化：底部的SizedBox避免内容紧贴BottomSheet边缘，贴合Material3的设计规范。

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