在Flutter中如何在GridView中显示图片?

11 浏览
0 Comments

在Flutter中如何在GridView中显示图片?

我想在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,

),

);

}

}

0
0 Comments

问题的原因是作者需要在GridView中显示23张图片,但不知道如何创建一个图片列表。解决方法是创建一个包含图片路径的字符串列表,并使用不同的Image widget来加载图片。对于从服务器加载图片,可以使用Image.network() widget;对于从文件加载图片,可以使用Image.file() widget;对于从资源加载图片,可以使用Image.asset() widget。

0