Flutter如何循环展示数据库接口返回的Image.network动态图片

现有代码无法正常展示图片的原因如下：

• 接口请求完成后未调用setState()，数据更新后无法触发UI重绘
• 在build方法中重复调用getImageData()，会导致页面每次重绘都发起请求，进入无限请求循环
• 列表渲染逻辑错误：定义的空imgs列表从未赋值，还在遍历imgs的逻辑里嵌套ListView.builder，甚至错误将字符串类型的urls长度作为列表项数量
• 未做异常边界处理，接口报错或图片加载失败时会直接触发页面崩溃

直接遍历接口返回的图片列表，拼接前缀地址后通过Image.network()渲染，接口请求完成后通过setState()刷新页面，移除build方法中的重复请求调用，补充基础异常判断。

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';
import 'package:getwidget/getwidget.dart'; // 提前在pubspec.yaml引入getwidget依赖才能使用GFItemsCarousel

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

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

class _ProfileImages extends State<ProfileImages>{
  final String? UsriD = Auth.prefs?.getString('usrid');
  List? imageData;
  final String imgPrefix = "https://www.*******.net/mm_api/files/profile/";

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

  Future<void> getImageData() async{
    try {
      final res = await http.get(Uri.https(
        'www.*******.net',
        '/mm_api/index.php',
        {'act':'usrPhotos','Usrid': '$UsriD'}
      ));
      if(res.statusCode == 200){
        setState(() {
          imageData = jsonDecode(res.body);
        });
      }
    } catch (e) {
      print("图片接口请求异常：$e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return imageData != null ? GFItemsCarousel(
      rowCount: 3,
      children: imageData!.map((item) {
        final fullImgPath = imgPrefix + item['image'];
        return Container(
          margin: const EdgeInsets.all(5.0),
          child: Stack(
            children: [
              ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(8.0)),
                child: Image.network(
                  fullImgPath,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: double.infinity,
                  errorBuilder: (context, error, stackTrace) {
                    return Container(
                      color: Colors.grey[200],
                      child: const Icon(Icons.broken_image, color: Colors.grey),
                    );
                  },
                ),
              ),
              const Positioned(
                top: 9,
                right: 9,
                child: SvgPicture.asset(
                  width: 30,
                  'assets/images/close.svg',
                  height: 30,
                ),
              )
            ],
          ),
        );
      }).toList(),
    ) : const Center(
      child: CircularProgressIndicator(),
    );
  }
}

• 使用GFItemsCarousel必须提前在项目的pubspec.yaml中添加getwidget依赖，执行flutter pub get后才能正常运行
• 给图片设置了BoxFit.cover适配布局，避免图片尺寸不统一导致的页面溢出
• 增加了图片加载失败的占位组件，裂图时不会直接报错
• 移除了原代码中未使用的导入和无用空列表变量，精简逻辑

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