在 Flutter 的 GridView 中显示图像？

Posted 2023-02-23

【中文标题】在 Flutter 的 GridView 中显示图像？

【英文标题】：Display Images in GridView in Flutter?

【发布时间】：2020-03-13 11:29:21

【问题描述】：

我想在 GridView 中显示图像列表。而我无法做到这一点。我想知道资产中图像列表的数据类型以及在这种情况下构造函数将如何提供帮助。刚开始学flutter，不知道怎么用。

class Home extends StatefulWidget 
  final String title;
  Home(this.title) : super();
  @override
  _HomeState createState() => _HomeState();
  
  @override
  Widget build(BuildContext context) 
var gridView = new GridView.builder(
    itemCount: 20,
    gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
    itemBuilder: (BuildContext context, int index) 
      return new GestureDetector(
        child: new Card(
          elevation: 10,
          child: new Container(
                // child: *Image list as child*, but don't know about the list datatype hence not created it!
            alignment: Alignment.center,
          ),
        ),
        onTap: () ,
      );
    );
return new Scaffold(
  appBar: new AppBar(
    backgroundColor: Colors.red,
    title: new Text("Flutter TabBar"),
  ),
  body: Container(
    padding: EdgeInsets.all(10),
    child: gridView,
  ),
);

【问题讨论】：

这能回答你的问题吗？ How to add image in Flutter

【参考方案1】：

GestureDetector(
        child: new Card(
          elevation: 10,
          child: new Container(
            // child: *Image list as child*, but don't know about the list datatype hence not created it!
            alignment: Alignment.center,
            child:GridView.builder(
            itemCount: items.length,
            gridDelegate:

            // crossAxisCount stands for number of columns you want for displaying
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
            itemBuilder: (BuildContext context, int index) 

              // return your grid widget here, like how your images will be displayed
              return Image.network('https://picsum.photos/250?image=9',);
              ),
           ),
        ),
        onTap: () ,
      )

【讨论】：

问题是我有 23 张图像要显示在“卡片”中，我需要制作一个图像列表，以便我可以直接将其用于卡片的子属性。但我不知道图像列表的数据类型。那么，如果你们能在这种情况下提供帮助？

只需创建一个字符串列表和字符串中的所有图像路径。要从服务器（网络路径）加载图像，您可以使用 Image.network() 小部件，要从文件加载图像，您可以使用 Image.file() 小部件，要从资产加载图像，您可以使用 Image.asset() 小部件.