如何使用ListView.Builder或ListView.Separated实现Flutter水平滚动列表？

你的代码存在几个关键问题导致水平滚动未生效，以下是具体修正步骤和完整代码：

核心问题修正点 #

• 启用水平滚动：取消scrollDirection: Axis.horizontal的注释，这是开启水平滚动的关键配置
• 替换布局组件：ListTile是垂直方向的布局组件，不适合水平列表子项，改用自定义卡片布局展示图片、名称和时间
• 调整分隔符：Divider是垂直方向的分隔线，水平列表需用SizedBox(width: 16)作为水平间隔
• 移除固定宽度限制：Container的width:500.0会限制滚动区域，删除该配置让ListView自适应父容器宽度

完整修正代码 #

import 'package:foodrecipe/components/foodColor.dart';
import 'package:flutter/material.dart';

class FoodItems extends StatelessWidget {
  FoodItems({super.key});

  final List<Map> arrFoodItems = [
    {
      "name": "Classic Green Salad 1",
      "Time": "16",
      "imageUrl": "assets/greenSalad.png"
    },
    {
      "name": "Classic Green Salad 2",
      "Time": "17",
      "imageUrl": "assets/greenSalad.png"
    },
    {
      "name": "Classic Green Salad 3",
      "Time": "18",
      "imageUrl": "assets/greenSalad.png"
    },
    {
      "name": "Classic Green Salad 4",
      "Time": "19",
      "imageUrl": "assets/greenSalad.png"
    },
    {
      "name": "Classic Green Salad 5",
      "Time": "20",
      "imageUrl": "assets/greenSalad.png"
    },
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 250.0,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10.0),
          color: FoodColor.colourStylesNeutralColourGray4,
        ),
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: ListView.separated(
          scrollDirection: Axis.horizontal, // 开启水平滚动
          padding: const EdgeInsets.symmetric(horizontal: 16),
          itemBuilder: ((context, index) {
            final item = arrFoodItems[index];
            // 自定义水平卡片布局
            return SizedBox(
              width: 180, // 固定子项宽度，保证布局一致性
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 展示食品图片
                  ClipRRect(
                    borderRadius: BorderRadius.circular(8),
                    child: Image.asset(
                      item["imageUrl"],
                      height: 120,
                      width: double.infinity,
                      fit: BoxFit.cover,
                    ),
                  ),
                  const SizedBox(height: 8),
                  // 食品名称
                  Text(
                    item["name"],
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 4),
                  // 耗时信息
                  Text(
                    "${item['Time']} mins",
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[600],
                    ),
                  ),
                ],
              ),
            );
          }),
          // 水平方向的子项间隔
          separatorBuilder: (context, index) => const SizedBox(width: 16),
          itemCount: arrFoodItems.length,
        ),
      ),
    );
  }
}

额外优化说明 #

• 给子项设置固定宽度，确保每个卡片布局统一
• 用Image.asset加载本地图片，配合ClipRRect实现圆角效果
• 添加内外边距，让内容和容器边缘保留合理间距，提升视觉体验
• 对文本设置行数限制和溢出处理，避免长文本破坏布局

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