如何从列表中的列表数据创建列表视图？

Question

错误：“参数类型 'Breakfast' 不能分配给参数类型 String。dart argument_type_not_assignable 早餐配料”。我不知道如何查看列表中的列表。

   class BreakfastIngredient extends StatefulWidget {
      const BreakfastIngredient({
        Key? key,
      required this.breakfast,
      }) : super(key: key);

      final Breakfast breakfast;

      @override
     _BreakfastIngredientState createState() => _BreakfastIngredientState();
   }

   class _BreakfastIngredientState extends State<BreakfastIngredient> {
   
   late List ingredients;

   @override

   Widget build (BuildContext context) {
    return Row(
      children: breakfastProducts.map((ingredients){
        return  Text(ingredients);
        }
         ).toList()
     );  
    }
   }

'我正在尝试从此列表中获取数据'。我想从“配料”中获取数据。

    List<Breakfast> breakfastProducts = [
     Breakfast(
      id: 1,
      images: [
        "assets/images/cilantro.png",
      ],
      title: "Cilantro and Kale Pesto Toast with a Fried Egg",
        time: 15,
        description: "Sliced bread is the perfect blank canvas, ready to be loaded up with virtuous ingredients.",
    rating: 4.8,
   isFavourite: true,
   isPopular: true,
   ingredients: [
        "¼ cup packed cilantro",
      "1 cup packed kale leaves",
       "¼ cup extra-virgin olive oil",
     "1 tablespoon white balsamic vinegar",
      "2 tablespoons hulled hemp seeds*",
      "salt",
        "Freshly ground pepper",
       "1 large slice of whole-wheat toast",
      "2 tablespoons unflavored whole-milk Greek yogurt",
       "1 fried egg",
   ],
   procedure: "procedure",
  ),
];

Answer 1

问题是 Text 小部件只接受一个字符串作为参数，而不是一个列表，一种可能的解决方法是将所有成分连接到一个字符串中：

   return Row(
      children: breakfastProducts.map((ingredients){
        return  Text(ingredients.join('\n'));
//Join every ingredient and insert a new line between each other
        }
         ).toList()
     );  

更高效的方法是使用 ListView 懒惰地创建小部件，但这取决于您想要实现的目标：

   ListView.builder(
itemCount: breakfastProducts.ingredients.length   
,itemBuilder: (_,i)=>Text(breakfastProducts.ingredients[i])),
     

完整示例： 请注意，您在这里使用的是单个早餐对象

   class BreakfastIngredient extends StatefulWidget {
      const BreakfastIngredient({
        Key? key,
      required this.breakfast,
      }) : super(key: key);

      final Breakfast breakfast;

      @override
     _BreakfastIngredientState createState() => _BreakfastIngredientState();
   }

   class _BreakfastIngredientState extends State<BreakfastIngredient> {
   
   late List ingredients;

   @override

   Widget build (BuildContext context) {
final ingredients=widget.breakfast.ingredients;
return Text(ingredients.join("\n"));
   }