我陷入了无限循环

Question

我无法让我的代码停止循环

class CategoriesScreenCopy extends ConsumerStatefulWidget {
  const CategoriesScreenCopy({super.key});

  @override
  ConsumerState<CategoriesScreenCopy> createState() => _CategoriesScreenState();
}

class _CategoriesScreenState extends ConsumerState<CategoriesScreenCopy> {

  List<Widget> drinkCategories = [];

  Widget highPDrinks = ListView();
  Widget highFDrinks = ListView();
  Widget lowBSDrinks = 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(getHighFiberDrinks());

    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
  void initState() {
    super.initState();
    getHighProteinDrinks();
    getHighFiberDrinks();
  }

  @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) => CategoryViewer(
          categoryDrinkList: getHighFiberDrinks(),
          categoryDrinkName: 'High-Protein Drinks',
        ),
      ),
    );
  }
}

我只是尝试渲染 2 个 CategoryViewer 实例，因为其中只有 2 个应该位于

drinkCategories

中。

getHighProteinDrinks()

Widget 函数也在列表中添加了 1，并且

getHighFiberDrinks()

应该添加另一个，但由于某种原因，我有无穷无尽的相同 CategoryViewer 和相同的子 ListView 小部件。我知道这应该很简单，但我对 Flutter 很陌生。一些帮助将不胜感激。

Answer 1

首先，您必须在 GridView.builder 中传递 itemCount 参数，否则 itemBuilder 会无限调用，最终会无休止地滚动屏幕。

从你的问题中我了解到你只需要 GridView 中的两个小部件我已经编辑了你的代码来实现这一点，我没有 highFiberDrinks 和 highProteinDrinks 的值，所以我创建了一个测试列表来完成代码。检查下面的代码，您可以根据您的观点更改它。

我还注意到你在函数中使用了for_in循环，我认为不应该在那里，因为它只是覆盖highFiberDrinks和highProteinDrinks列表具有相同的值。

class CategoriesScreenCopy extends StatefulWidget {
  const CategoriesScreenCopy({super.key});

  @override
  State<CategoriesScreenCopy> createState() => _CategoriesScreenState();
}

class _CategoriesScreenState extends State<CategoriesScreenCopy> {
  List<Widget> drinkCategories = [];

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

  List<String> highFiberDrinks = [
    "F_Drint_1 ",
    "F_Drint_2 ",
    "F_Drint_3 ",
    "F_Drint_4 ",
  ];
  List<String> highProteinDrinks = [
    "P_Drint_1 ",
    "P_Drint_2 ",
    "P_Drint_3 ",
    "P_Drint_4 ",
  ];

  Widget getHighProteinDrinks() {
    highPDrinks = ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: highProteinDrinks.length,
      itemBuilder: (ctx, index) => Text(
        highProteinDrinks[index],
      ),
    );

    drinkCategories.add(highPDrinks);

    return highPDrinks;
  }

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

    drinkCategories.add(highFDrinks);

    return highFDrinks;
  }

  @override
  void initState() {
    super.initState();
    getHighProteinDrinks();
    getHighFiberDrinks();
  }

  @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) => Container(
                color: index == 0 ? Colors.red : Colors.blue,
                child: drinkCategories[index],
              )),
    );
  }
}

希望这对您有帮助。