如何实现modalBottomSheet中ListView的横向滚动？

问题核心在于底部弹窗布局未给横向ListView提供足够的宽度约束，导致滚动区域被压缩，无法触发横向滚动。以下是修正后的实现方案：

修正后的完整代码 #

弹窗触发按钮（无需修改） #

FloatingActionButton(
  onPressed: () {
    showModalBottomSheet<void>(
      context: context,
      builder: (BuildContext context) {
        return _buildBottomWidget();
      });
    },
  ),

弹窗内容组件（关键修改） #

Widget _buildBottomWidget() {
  return Container(
    width: double.infinity, // 让容器充满弹窗的整个宽度
    child: Column(
      mainAxisSize: MainAxisSize.min, // 仅占用内容所需高度，避免弹窗过高
      children: [
        const Text('Header'),
        SizedBox(
          height: 100,
          child: ListView.builder(
            itemCount: 10,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  width: 100,
                  color: Colors.amber,
                  child: Column(
                    children: <Widget>[
                      Text('Index $index'),
                      Text('Description for index $index'),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
      ],
    ),
  );
}

关键修改说明 #

• 添加宽度约束：用Container包裹Column并设置width: double.infinity，确保横向ListView能获取到弹窗的完整宽度，拥有足够的滚动空间。
• 优化弹窗高度：给Column设置mainAxisSize: MainAxisSize.min，让弹窗高度仅适配内容，避免占据过多屏幕空间。
• 移除冗余组件：去掉原代码中的Center，因为Container配合Column的默认对齐已经能满足布局需求，且不会干扰宽度约束传递。

如果需要让标题居中显示，只需给Text添加textAlign: TextAlign.center属性即可。

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