Flutter中如何在GridView内展示assets资源图片列表？

1. Assets图片列表适用的数据类型 #

• 最常用的是List<String>类型，直接存储所有assets图片的完整路径字符串即可，无需额外封装，适合仅需要展示图片的场景
• 如果需要为图片绑定标题、分类等额外信息，可以自定义实体类，使用List<自定义实体类>作为数据源

2. 构造函数在该场景的作用 #

分为三个层级的构造函数作用：

• 自定义展示组件的构造函数：可以将assets路径列表作为入参传入，避免组件内硬编码资源路径，提升组件通用性
• GridView系列构造函数：比如GridView.builder构造函数适合加载长列表assets图片，自动复用item项提升性能；构造参数gridDelegate可配置网格的列数、间距、宽高比等布局规则，itemCount直接绑定数据源长度控制总条目数
• Image.asset构造函数：接收assets路径字符串作为核心入参，可同步配置填充模式、占位图、错误占位图等展示属性，实现图片资源的加载渲染

3. 完整实现步骤 #

3.1 配置assets资源路径 #

首先在项目根目录的pubspec.yaml文件中声明assets资源目录，配置示例：

flutter:
  # 注意缩进要和flutter字段保持2个空格的距离
  assets:
    - assets/images/ # 配置该目录后，目录下所有图片资源都可直接调用

注意：配置完成后需要执行flutter pub get命令，并且重启应用才会生效，热重载无法识别新增的assets配置。

3.2 定义数据源 #

// 用List<String>存储所有图片的assets路径
final List<String> _assetImages = [
  'assets/images/photo1.jpg',
  'assets/images/photo2.jpg',
  'assets/images/photo3.jpg',
  'assets/images/photo4.jpg',
  // 继续添加你的图片路径
];

3.3 构建GridView展示列表 #

@override
Widget build(BuildContext context) {
  return GridView.builder(
    // 配置网格布局规则
    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 3, // 每行展示3张图片
      crossAxisSpacing: 8, // 列与列之间的间距
      mainAxisSpacing: 8, // 行与行之间的间距
      childAspectRatio: 1, // 每个图片项的宽高比为1:1
    ),
    padding: const EdgeInsets.all(8),
    // 条目总数和数据源长度一致
    itemCount: _assetImages.length,
    // 构建每个网格的图片项
    itemBuilder: (BuildContext context, int index) {
      return ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Image.asset(
          // 取出对应下标的图片路径
          _assetImages[index],
          fit: BoxFit.cover, // 图片自适应填充整个item区域
        ),
      );
    },
  );
}

常见问题排查 #

• 图片无法显示首先检查路径拼写是否和实际文件路径完全一致，Flutter的assets路径是大小写敏感的
• 确认pubspec.yaml的assets配置缩进正确，yaml格式对缩进要求严格
• 新增assets资源后如果不显示，尝试清理缓存后重启应用：执行flutter clean后重新运行项目

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