Flutter GridView加载图片仅显示加载图标不展示内容如何解决

核心错误点 #

• 没有给FutureBuilder传future参数，导致snapshot永远不会拿到数据，页面一直停在加载状态；且你使用的是本地静态资源，完全不需要用FutureBuilder做异步加载，属于多余逻辑。
• 大量语法错误：类似height: MediaQuery.of(context).size.height;这种写法是把Widget属性写在了函数体内，不会生效，属于语法误用。
• GridView的itemBuilder逻辑错误：代码最后固定返回加载动画，就算进入数据分支也不会渲染卡片内容；同时GridView的primary、shrinkWrap、padding等属性放错了位置，写在了itemBuilder内部不会生效。
• 资源列表定义错误：你定义的list是List<Set<Image>>类型，没有image属性，list[0].image根本访问不到；同时写死了索引0，所有条目都会显示同一张图。
• 类名不符合Dart规范：自定义类名需要使用大驼峰命名，badriya2应改为Badriya2。

修正后代码 #

第一步：调整资源列表（/lib/list/list.dart） #

// 直接存图片路径字符串即可，不需要提前构建Image组件
List<String> imagePaths = [
  'assets/images/butterfly.jpg',
  'assets/images/flower.jpg',
  'assets/images/glass.jpg',
  'assets/images/sun.jpg',
  'assets/images/lighting.jpg',
  'assets/images/phone.jpg',
  'assets/images/eye.jpg',
  'assets/images/photo1.jpg',
];

第二步：调整页面代码 #

import 'package:flutter/material.dart';
import 'package:sct/list/list.dart';

// 类名改用大驼峰
class Badriya2 extends StatefulWidget {
  @override
  State<Badriya2> createState() => _Badriya2State();
}

class _Badriya2State extends State<Badriya2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("She codes"),
      ),
      // 移除多余的FutureBuilder，直接使用GridView
      body: GridView.builder(
        // GridView属性统一放在这里
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3, // 原来设的5太挤，可根据需要调整
          crossAxisSpacing: 5.0,
          mainAxisSpacing: 5.0,
          childAspectRatio: 1,
        ),
        padding: const EdgeInsets.all(20),
        itemCount: imagePaths.length,
        itemBuilder: (context, index) {
          // 直接返回卡片组件，不要返回加载动画
          return Card(
            elevation: 10,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15),
            ),
            child: Center(
              child: CircleAvatar(
                // 调整半径适配网格大小
                minRadius: 30,
                maxRadius: 45,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  // 用index动态取对应路径的图片
                  child: Image.asset(imagePaths[index]),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

避免重复渲染的优化方案 #

• 将GridView的条目提取为独立的无状态组件，添加const构造，只要条目数据不变就不会重复构建。
• 静态列表无需使用异步包装，减少不必要的判断逻辑与组件刷新。
• 只有列表数据发生变化时再调用setState，避免无意义的页面重绘。

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