Flutter如何根据数据库返回数据循环填充List Widget展示网络图片

你的代码存在5个直接导致运行异常的问题：

• 接口返回的image字段仅为图片文件名，不是可直接访问的完整网络URL，直接传入Image.network会触发无效参数错误
• 加载状态判断逻辑失效：判断条件用了从未赋值的Imagedata变量，初始状态下永远无法进入正常渲染分支
• 变量名拼写错误：请求参数里写的是UsriD（i小写），和你定义的UsrID（r大写）不一致，接口请求实际传了空值
• 列表嵌套冗余：在imgs.map生成轮播子项时，每个子项内部又套了一层ListView.builder，相当于N个列表嵌套渲染，逻辑完全混乱
• 列表重复累加问题：多次触发组件重建时，会不停往imgs里追加重复数据

1. 拼接图片完整访问路径：将服务端图片存储的根域名/目录路径，和接口返回的文件名拼接为完整URL（替换成你自己服务端的实际图片存放路径即可）
2. 修正加载判断逻辑：用列表是否为空判断初始加载状态
3. 删除冗余嵌套的ListView，直接为轮播组件生成单个图片子项
4. 每次拉取接口数据前先清空旧列表，避免数据重复
5. 增加图片加载异常兜底，避免单张图片失效导致整个页面崩溃

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:mindmatch/utils/Auth.dart';
// 用GFItemsCarousel必须导入getwidget包，没导入的话先在pubspec.yaml加依赖
import 'package:getwidget/getwidget.dart';

class ProfileImages extends StatefulWidget {
  ProfileImages({Key? key}) : super(key: key);

  @override
  _ProfileImages createState() => _ProfileImages();
}

class _ProfileImages extends State<ProfileImages>{
  var UsrID = Auth.prefs?.getString('usrid');
  // 替换成你服务端实际的图片存放根路径，拼接后要能在浏览器直接打开图片才算正确
  final String imgBasePath = "https://www.*******.net/mm_api/uploads/";
  final List<String> imgs = [];

  @override
  void initState() {
    super.initState();
    getImageData();
  }

  getImageData() async{
    // 修正变量名拼写错误
    var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','UsrID': '$UsrID'}));
    var jsonData = json.decode(res.body);
    List<String> fetchedImages = jsonData.map<String>((json) => imgBasePath + json['image']).toList();

    setState(() {
      // 先清空旧数据再追加新数据，避免重复
      imgs.clear();
      imgs.addAll(fetchedImages);
    });
  }

  @override
  Widget build(BuildContext context) {
    return
      imgs.isNotEmpty ? GFItemsCarousel(
        rowCount: 3,
        children: imgs.map(
              (imgUrl) {
            return Container(
              margin: EdgeInsets.all(5.0),
              child: Stack(
                children: [
                  ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    child: Image.network(
                      imgUrl,
                      fit: BoxFit.cover,
                      width: double.infinity,
                      height: 120,
                      // 图片加载失败兜底显示本地默认图
                      errorBuilder: (context, error, stackTrace) {
                        return Image.asset("assets/images/people.png", fit: BoxFit.cover, width: double.infinity, height: 120,);
                      },
                    ),
                  ),
                  Positioned(
                    top: 9,
                    right: 9,
                    child: SvgPicture.asset(
                      width: 30,
                      'assets/images/close.svg',
                      height: 30,
                    ),
                  )
                ],
              ),
            );
          },
        ).toList(),
      ): const Center(
        child: CircularProgressIndicator(),
    );
  }
}

• 代码里的imgBasePath必须替换成你服务端实际的图片访问前缀，比如接口返回文件名5e11b3c030f07b70ee982158bccff41f.jpeg，拼接后的完整地址要能直接在浏览器打开看到图片才是正确配置
• 不需要轮播效果的话，可以直接把GFItemsCarousel替换成GridView，子项渲染逻辑完全通用，不需要额外嵌套列表组件

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