Flutter GridView如何实现数组数据的动态渲染

核心思路 #

不需要手写传统for循环手动累加子项列表，直接利用Dart内置的列表映射能力，把数据源数组里的每一项直接转换成你已经写好样式的格子Widget即可，代码干净没有冗余。

具体实现步骤 #

1. 先整理好可操作的数据源
   把你提供的JSON结构数据转成Dart支持的列表格式，直接定义在Widget的state类或者页面顶层即可：

   final List<Map<String, String>> categoryList = [
     {
       "Name": "Computer Software",
       "Image": "https://cdn.zeplin.io/5fa90ed1e66d311f086e0115/assets/75b908a5-60c0-4e9a-84a4-ae3ca65c6973.png"
     },
     {
       "Name": "Computer Hardware",
       "Image": "https://cdn.zeplin.io/5fa90ed1e66d311f086e0115/assets/75b908a5-60c0-4e9a-84a4-ae3ca65c6973.png"
     },
   ];
   

   如果后续要维护更多字段，建议抽一个轻量的实体类替代裸Map的写法，避免拼错字段名、出现空值报错：

   class CategoryItem {
     final String name;
     final String imageUrl;
     CategoryItem({required this.name, required this.imageUrl});
   }
   

2. 替换原有的children空列表
   直接用Dart的map方法，遍历数据源把每一项转换成你之前已经写好样式的GestureDetector格子，把原来硬编码的图片、文本内容替换成从数组里读取的对应值，最后调用toList()转成GridView需要的Widget列表格式塞进去即可。
   替换后的完整代码如下：

   Container(
     color: Color(0xffECF0F1),
     child: GridView(
       padding: EdgeInsets.all(0),
       shrinkWrap: true,
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisSpacing: 1,
         mainAxisSpacing: 1,
         crossAxisCount: 4,
       ),
       children: categoryList.map((item) {
         return GestureDetector(
           onTap: () {
             Navigator.push(
               context,
               MaterialPageRoute(builder: (context) => BookService1()),
             );
           },
           child: Container(
             color: Colors.white,
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
                 Container(
                   height: Height * 0.04,
                   // 注意：原硬编码用的是本地资产图，这里数据源是网络图片，要换成Image.network
                   child: Image.network(item["Image"]!),
                 ),
                 SizedBox(
                   height: Height * 0.008,
                 ),
                 Text(
                   item["Name"]!,
                   style: TextStyle(
                     fontFamily: 'UbuntuMedium',
                     fontSize: 10,
                   ),
                   textAlign: TextAlign.center,
                 )
               ],
             ),
           ),
         );
       }).toList(),
     ),
   ),
   

几个实用优化提示 #

• 这种map映射的写法，本质上也是遍历数组，但比自己写for (int i = 0; i < len; i++)然后手动add到空列表的写法简洁很多，不需要自己维护列表初始化、索引判断的冗余逻辑，是Flutter开发里非常通用的列表渲染写法，完全不存在“不优雅”的问题。
• 如果后续每个格子的跳转逻辑不一样，可以把跳转目标也加到数据源的字段里，在onTap里读取对应值做路由跳转，不用在每个格子的点击事件里单独写逻辑。
• 当后续数据源长度超过20个时，可以把当前的固定children构造的GridView换成GridView.builder，它会按需渲染可见区域的子项，内存效率更高，只需要把刚才写的单个格子的生成逻辑对应到itemBuilder参数里即可，改动量很小。
• 因为你的数据源用的是网络图片，记得给Android、iOS端配置好对应的网络访问权限，不然会出现图片加载失败的问题。

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