Flutter中如何在Widget内遍历对象列表并获取对应属性渲染？

报错原因 #

你遇到的报错核心是Dart中forEach方法返回值为void，而GridView.count的children参数要求传入List<Widget>类型的集合，直接把forEach调用放到children数组里，触发了类型不匹配错误。

解决方案 #

不要使用forEach做遍历渲染，替换为map方法：map可以按照自定义规则把商品列表的每一项转换为对应Widget，最后调用toList()转为List类型传入children参数即可。

修正后的代码 #

// 类名遵循Dart大驼峰命名规范调整，你原本的drinkMenu改为DrinkMenu
class DrinkMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size screenSize = MediaQuery.of(context).size;
    // 这里的products类也建议遵循规范改为大驼峰Products，暂时保留你原本的命名
    List<products> _products = <products>[];
    // 后续在这里填充你的实际商品数据到_products列表中

    return Scaffold(
      appBar: AppBar(
        title: Text('Bebidas.'),
        backgroundColor: Colors.brown,
      ),
      body: GridView.count(
        padding: const EdgeInsets.all(15),
        mainAxisSpacing: 10,
        crossAxisCount: 1,
        childAspectRatio: 2.4,
        // 直接传入map转换后的Widget列表，不需要额外套一层[]
        children: _products.map((products _drink) {
          return showGrid(
            child: GestureDetector(
              onTap: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  return productosNuevos();
                }));
              },
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  // 后续可替换为 _drink.商品名称字段 读取实际值
                  Text(
                    "BebidasPH",
                  ),
                  Container(
                    alignment: Alignment.bottomRight,
                    child: Image.asset(
                      // 后续可替换为 _drink.商品图片字段 读取实际路径
                      "assets/images/cafesitop.png",
                      width: screenSize.width / 2.635,
                    ),
                  ),
                ],
              )
            ),
            // 后续可替换为 _drink.商品价格字段 读取实际值
            text: ''
          );
        }).toList(),
      )
    );
  }
}

额外注意事项 #

• 目前_products是空白列表，填充实际商品数据后才会渲染出对应内容
• 建议统一遵循Dart命名规范：类名用大驼峰，变量/方法名用小驼峰，避免后续出现潜在的命名兼容问题

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