如何在Flutter的GridView.builder卡片中添加动态信息？

我懂你想要的效果——不用硬编码每个卡片的图标和文字，让GridView根据数据源自动生成不同内容的卡片对吧？这其实是Flutter里很常见的动态列表/网格实现方式，咱们只需要把数据和UI渲染分离开就行，下面给你具体的修改方案：

第一步：定义你的数据源 #

首先，我们把每个卡片需要展示的信息（比如图标、标题）整理成一个数据源列表。你可以用简单的Map快速实现，也可以用更规范的自定义类，两种方式都给你参考：

方式1：使用Map快速实现 #

// 把每个卡片的图标和标题存在这个列表里，想加新卡片直接在这里加就行
final List<Map<String, dynamic>> cardItems = [
  {'icon': Icons.book, 'title': '阅读'},
  {'icon': Icons.music_note, 'title': '音乐'},
  {'icon': Icons.sports_soccer, 'title': '足球'},
  {'icon': Icons.camera_alt, 'title': '摄影'},
  {'icon': Icons.video_library, 'title': '电影'},
  {'icon': Icons.restaurant, 'title': '烹饪'},
  {'icon': Icons.hiking, 'title': '徒步'},
  {'icon': Icons.palette, 'title': '绘画'},
];

方式2：使用自定义类（类型更安全） #

如果你的卡片以后可能扩展更多属性，用自定义类会更稳妥，避免键名写错的问题：

// 先定义一个卡片数据类
class CardItem {
  final IconData icon;
  final String title;

  CardItem({required this.icon, required this.title});
}

// 然后创建数据源列表
final List<CardItem> cardItems = [
  CardItem(icon: Icons.book, title: '阅读'),
  CardItem(icon: Icons.music_note, title: '音乐'),
  CardItem(icon: Icons.sports_soccer, title: '足球'),
  // 剩下的卡片按这个格式添加就行
];

第二步：修改GridView.builder的代码 #

接下来把你原来硬编码的部分替换成从数据源取数据的逻辑，同时把itemCount改成数据源的长度（这样卡片数量会跟着数据源自动变化）：

对应方式1的修改 #

GridView.builder(
  itemCount: cardItems.length, // 用数据源的长度代替固定的8
  itemBuilder: (context, index) => Card(
    child: Container(
      margin: EdgeInsets.all(4.0),
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          // 从数据源取当前索引的图标
          Icon(cardItems[index]['icon'], size: 18.0),
          // 从数据源取当前索引的标题
          Text(cardItems[index]['title']),
        ],
      ),
    ),
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
),

对应方式2的修改 #

如果用了自定义类，就直接访问类的属性：

GridView.builder(
  itemCount: cardItems.length,
  itemBuilder: (context, index) => Card(
    child: Container(
      margin: EdgeInsets.all(4.0),
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Icon(cardItems[index].icon, size: 18.0),
          Text(cardItems[index].title),
        ],
      ),
    ),
  ),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
),

为什么这样做？ #

这样修改之后，你完全不用再硬编码每个卡片的内容了：

• 要添加新卡片？直接在cardItems列表里加一项就行
• 要修改某个卡片的图标或标题？只需要改数据源里对应的项
• 数据源甚至可以从网络请求、本地存储里动态获取，彻底实现非静态渲染

最后把修改后的代码整合到你的原有代码里就可以正常运行啦～

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