Flutter中GridView.builder无法渲染可滚动行项，求排查

尝试在屏幕上展示两个可滚动行，但使用GridView.builder时界面无任何内容显示，以下是categories.dart的代码：

import 'package:gudlife_/data/dummy_data.dart';

class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
  final List<Widget> drinkCategories = [];

  Widget highPDrinks = ListView();
  Widget highFDrinks = ListView();

  Widget getHighProteinDrinks() {
    for (final drink in highProteinDrinks) {
      highPDrinks = ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: highProteinDrinks.length,
        itemBuilder: (ctx, index) => DrinkItem(
          drink: highProteinDrinks[index],
        ),
      );
    }

    drinkCategories.add(highPDrinks);
    return highPDrinks;
  }

  Widget getHighFiberDrinks() {
    for (final drink in highFiberDrinks) {
      highFDrinks = ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: highFiberDrinks.length,
        itemBuilder: (ctx, index) => DrinkItem(
          drink: highFiberDrinks[index],
        ),
      );
    }

    drinkCategories.add(highFDrinks);
    return highFDrinks;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 3 / 3,
          crossAxisSpacing: 20,
          mainAxisSpacing: 8,
        ),
        itemCount: drinkCategories.length,
        itemBuilder: (context, index) => Indexed(
          index: 3,
          child: CategoryViewer(
            categoryDrinkList: drinkCategories.elementAt(index),
          ),
        ),
      ),
    );
  }
}

补充说明：highProteinDrinks和highFiberDrinks来自dummy_data.dart文件。

错误分析及修复方案 #

核心问题

drinkCategories列表始终是空的——你定义了填充列表的方法，但从未调用过它们，导致GridView的itemCount为0，自然没有内容显示。

此外还有两处冗余逻辑：

• getHighProteinDrinks()和getHighFiberDrinks()中的for循环完全多余，ListView.builder会根据itemCount自动生成所有子项，不需要遍历数据重复创建组件。
• 初始定义的空ListView变量没有实际作用，反而容易造成混淆。

修复后的代码

import 'package:gudlife_/data/dummy_data.dart';

class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
  final List<Widget> drinkCategories = [];

  @override
  void initState() {
    super.initState();
    // 在组件初始化时调用方法，填充drinkCategories列表
    drinkCategories.add(getHighProteinDrinks());
    drinkCategories.add(getHighFiberDrinks());
  }

  Widget getHighProteinDrinks() {
    // 移除多余的for循环，直接创建横向ListView
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: highProteinDrinks.length,
      itemBuilder: (ctx, index) => DrinkItem(
        drink: highProteinDrinks[index],
      ),
    );
  }

  Widget getHighFiberDrinks() {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: highFiberDrinks.length,
      itemBuilder: (ctx, index) => DrinkItem(
        drink: highFiberDrinks[index],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 1,
          childAspectRatio: 3 / 3,
          crossAxisSpacing: 20,
          mainAxisSpacing: 8,
        ),
        itemCount: drinkCategories.length,
        itemBuilder: (context, index) => Indexed(
          index: 3,
          child: CategoryViewer(
            categoryDrinkList: drinkCategories[index],
          ),
        ),
      ),
    );
  }
}

关键修复点

1. 在initState()生命周期方法中调用getHighProteinDrinks()和getHighFiberDrinks()，将返回的可滚动列表添加到drinkCategories，确保列表有内容。
2. 移除方法中冗余的for循环，ListView.builder只需创建一次即可根据数据源生成所有子项。
3. 删除无意义的初始空ListView变量，简化代码结构。

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