Flutter中如何在SliverList内调用列表项并实现大量餐厅数据展示

你当前需求的最优实现是使用SliverChildBuilderDelegate替代原有SliverChildListDelegate，通过懒加载机制承载大量餐厅数据，避免一次性渲染所有列表项造成的卡顿问题。

方案说明 #

SliverChildListDelegate会提前构建所有子组件，仅适合少量静态数据的场景；而SliverChildBuilderDelegate只会构建当前可视区域+预加载区域的组件，完全适配大量数据的性能要求，是长列表的官方推荐实现方式。

代码修改步骤 #

1. 直接替换原有SliverList代码（无需使用你原有生成全量列表的函数，性能最优） #

SliverToBoxAdapter(//horizontal list
  child:  RestaurantsSlide(title: 'Featured Restaurants',),
),
SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) {
      // 按需读取对应索引的餐厅数据，实时构建卡片
      final restaurant = RESTAURANT_DATA[index];
      return Padding(
        padding: const EdgeInsets.only(left: 10.0, right: 10, bottom: 25),
        child: RestaurantCard(restaurant: restaurant),
      );
    },
    // 绑定餐厅数据总长度
    childCount: RESTAURANT_DATA.length,
  ),
)

2. 若要兼容你原有函数写法（仅适合100条以内少量数据） #

首先修改原有函数的返回值，将void类型改为返回List：

List<Widget> restaurantCardList() {
  List<dynamic> restaurantsList = RESTAURANT_DATA;
  List<Widget> listItems = [];
  restaurantsList.forEach((restaurant) {
    listItems.add(
      Padding(
        padding: const EdgeInsets.only(left: 10.0, right: 10, bottom: 25),
        child: RestaurantCard(restaurant: restaurant),
      )
    );
  });
  return listItems;
}

再在SliverList中调用该函数：

SliverList(
  delegate: SliverChildListDelegate.fixed(
    restaurantCardList(),
  ),
)

注意：第二种方案会一次性生成所有列表项，数据量过大时会出现明显的内存占用过高、滑动卡顿问题，优先选择第一种懒加载方案。

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