Flutter中如何实现可复用的ListView Builder组件

1. 统一菜单数据结构 #

先给菜单数据定义统一的模型类，确保newMenu和oldMenu结构完全一致：

class MenuItem {
  final String name;
  final String image;

  MenuItem({required this.name, required this.image});
}

// 基于模型类定义两个菜单列表
final List<MenuItem> newMenu = [
  MenuItem(name: "新菜品A", image: "assets/new_a.png"),
  MenuItem(name: "新菜品B", image: "assets/new_b.png"),
];

final List<MenuItem> oldMenu = [
  MenuItem(name: "经典菜品X", image: "assets/old_x.png"),
  MenuItem(name: "经典菜品Y", image: "assets/old_y.png"),
];

2. 封装通用的ListView组件 #

把ListView Builder逻辑封装成独立组件，直接接收菜单列表作为参数，不再硬编码指定某一个列表：

class MenuListView extends StatelessWidget {
  final List<MenuItem> menuData;

  const MenuListView({super.key, required this.menuData});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: menuData.length,
      itemBuilder: (context, index) {
        // 这里在itemBuilder内部使用index，自然就能正确访问列表项
        return SelectionComponent(
          name: menuData[index].name,
          image: menuData[index].image,
        );
      },
    );
  }
}

3. 切换菜单只需传入不同列表 #

在需要展示菜单的地方，直接传入对应的列表即可实现切换，完全复用ListView代码：

// 展示新菜单
MenuListView(menuData: newMenu)

// 展示旧菜单
MenuListView(menuData: oldMenu)

问题原因说明 #

之前出现index未定义的错误，是因为你在组件外部直接引用oldMenu[index]——index只有在ListView.builder的itemBuilder回调函数内部才是有效变量，把整个列表传入组件后，在回调里访问索引就不会有问题了。

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