如何根据数据库中的数据在最终列表中添加循环？

Question

我想在循环中显示图像，这些图像存储在列表小部件中，但这是静态数据。像这样：-

最终名单=[

“资产/图像/人”，

“资产/图像/人”、“资产/图像/人”、

“资产/图像/人”，

“资产/图像/人”，

]；

现在，我想用动态数据显示这个列表，这就是为什么我有一个从数据库返回图像的API。现在，我想在final List<String> imgs = []小部件中显示这些图像。那么如何在这个小部件中添加循环呢？请帮帮我。在图像中，我存储来自数据库的图像URL。

我想在List widget中显示这些图像

这是我的代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:io';
import 'package:mindmatch/utils/Auth.dart';
import 'package:http_parser/http_parser.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');
 var Imagedata;
 var Images = "";

 @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);
 var images = jsonData.map<String>((json) => json['image']).toList();
//print(images);

 setState(() {
  for(var img in images){
    imgs.add(img);
  }
 });
 }

 final List<String> imgs = [];




@override
Widget build(BuildContext context) {


return
  Imagedata != null?GFItemsCarousel(
  rowCount: 3,
  //itemHeight: MediaQuery.of(context).size.height / 1.5,
  children: imgs.map(
        (url) {
      return Container(
        child: ListView.builder(
          itemCount: imgs.length,
          itemBuilder: (context, index) {
            //check the image if it is asset or network
              return Container(
                margin: EdgeInsets.all(5.0),
                child: Stack(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(8.0)),
                      child:
                      Image.network(imgs[index]),
                    ),
                    Positioned(
                      top: 9,
                      right: 9,
                      child: SvgPicture.asset(
                        width: 30,
                        'assets/images/close.svg',
                        height: 30,
                      ),
                    )
                  ],

                ),
              );

          },
        ),
      );
    },
  ).toList(),
): const Center(
    child: CircularProgressIndicator(),
);
}
}

在image变量中，我从数据库中存储完整的图像URL，但是如何在List widget中显示它--请帮助我在循环中显示这些图像。

这是我的JSON数据：-

[{"id":"8","image":"5e11b3c030f07b70ee982158bccff41f.jpeg"},{"id":"9","image":"158ad385dff9ec07a40d4401351de434.jpeg"},{"id":"10","image":"af8079a1832c0458b80ac17c865a840b.jpeg"}]

这是一个新的错误，请大家帮助我。

​

请帮助我如何显示这些图像。

Answer 1

从响应中提取图像并将其添加到imgs列表中。

  var res = await http.get(Uri.https('www.*******.net', '/mm_api/index.php',{'act':'usrPhotos','UsrID': '${UsrID}'}));
  Imagedata = jsonDecode(res.body);

  
  imgs.clear();
  ImagesData.forEach((e){
imgs.add(e.image);

})

 }```

Then after 

ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(8.0)),
              child:

//append with baseURL
              Image.network(
             "https://www.*******.net/files/profile/" +   url,
                fit: BoxFit.cover,
              ),
            ),

Answer 2

像这样使用ListView.builder：

用于资产映像

ListView.builder(
  itemCount: img.length,
  itemBuilder: (BuildContext context, int index) {
  return new Image.asset(img[index], fit: BoxFit.cover);
 },
);

来自网络的图像

 ListView.builder(
      itemCount: urls.length,
      itemBuilder: (BuildContext context, int index) {
        return Image.network(urls[index]);
      },
    );
  }

您可以使用cached_network_image从网络中获取图像一次，然后从本地缓存获取图像。

在您的示例中，成功地从数据库获取图像之后，将它们与imgs列表合并

将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);
  var images = jsonData.map<String>((json) => json['image']).toList();
  
  setState(() {
     for(var img in images){
       imgs.add(img);
   }  
  });
 }

将build更改为

@override
Widget build(BuildContext context) {

  return Scaffold(
    appBar: AppBar(
      title: Text("Profile Images"),
    ),
    body: Container(
      child: ListView.builder(
        itemCount: imgs.length,
        itemBuilder: (context, index) {
          //check the image if it is asset or network 
          if(imgs[index].contains("assets")){
            return Container(
              margin: EdgeInsets.all(10),
              child: Image.asset(imgs[index]),
            );
          }else{
            return Container(
              margin: EdgeInsets.all(10),
              child: Image.network(imgs[index]),
            );
          }
        },
      ),
    ),
  );
}