Flutter中如何在ListView.builder内实现横向滚动的ListView

核心问题说明 #

你当前的代码存在两处逻辑错误导致效果不符合预期：

1. 列表嵌套逻辑颠倒：你将外层垂直ListView.builder的itemCount设置为电影数据的总长度，每个垂直项仅放一张海报，内部横向ListView只承载单张图片自然无法触发横向滚动
2. 未处理嵌套滚动的手势冲突：嵌套使用多方向ListView时需要配置滚动物理特性参数，避免滑动手势被父组件拦截

修复后代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
        if (snapshot.hasError || !snapshot.hasData) {
          return const Center(
            child: Text("数据加载失败"),
          );
        }
        // 外层为垂直ListView，承载整个页面的垂直滚动内容
        return ListView(
          children: [
            // 这里可以放其他垂直滚动的模块，比如页面标题、其他分类入口等
            const Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                "热门电影",
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
            ),
            // 横向滚动模块
            SizedBox(
              height: 250,
              child: Card(
                // 横向ListView仅作为外层垂直ListView的一个子项存在
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  // 处理嵌套滚动冲突
                  shrinkWrap: true,
                  physics: const ClampingScrollPhysics(),
                  // 横向滚动的itemCount才是电影数据总长度
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int i) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8),
                      child: Image(
                        image: NetworkImage(snapshot.data[i].poster),
                        fit: BoxFit.cover,
                        width: 150,
                      ),
                    );
                  },
                ),
              ),
            ),
            // 这里可以继续加其他垂直滚动的模块
          ],
        );
      },
    ),
  );
}

关键修改点说明 #

• 调整了列表嵌套结构：外层垂直ListView负责整个页面的垂直滚动，横向滚动的海报列表仅作为外层的一个子模块，符合你“整体垂直、局部横向”的滚动需求
• 内层横向滚动改用ListView.builder渲染所有电影海报，仅在元素进入可视区域时渲染，性能更优
• 新增shrinkWrap: true和physics: const ClampingScrollPhysics()配置，解决嵌套滚动的手势冲突问题
• 给网络图片增加了固定宽度和自适应缩放配置，避免图片布局溢出

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