Flutter中如何通过for循环调用自定义函数动态渲染GridView卡片组件

解决方法 #

你只需要从循环遍历到的每个Map对象中取出对应字段传入cards方法即可，修改后的调用代码如下：

Container(
  child: GridView.count(
    crossAxisCount: 2,
    children: [
      for(var i in cardList)
        cards(i['img'], i['icon'], i['name'])
    ],
  ),
),

额外优化建议 #

• 给cards方法的参数加上类型约束，避免隐式类型转换导致的错误：Widget cards(String img, String icon, String name)
• 给cardList明确指定类型为List<Map<String, String>>，后续调用取值时不会报类型相关的编译警告
• 有条件的情况下可以把卡片数据封装为专用实体类，而非直接用Map存取，避免键名字拼写错误导致的运行时异常

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