[英]How do i load all of may images in gridview? using flutter
如何在 Gridview 中加载我的资产/衬衫的所有图像? 我有 10 张图片在 5 月资产/衬衫
这是我用于创建 gridview 的现有代码
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
backgroundColor: Colors.white,
body: GridView.count(
crossAxisCount: 2,
children: List.generate(1, (index) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/shirt/white-shirt1.jpg"),
fit: BoxFit.cover,
),
),
),
);
}),
),
);
}
pubspec.yaml
assets:
- assets/shirt/white-shirt1.jpg
- assets/shirt/yellow-shirt2.jpg
- assets/shirt/navyblue-shirt3.jpg
- assets/shirt/blue-shirt4.png
- assets/shirt/red-shirt5.jpg
- assets/shirt/brown-shirt6.jpg
- assets/shirt/maroon-shirt7.jpg
- assets/shirt/lime-shirt8.jpg
- assets/shirt/green-shirt9.jpg
- assets/shirt/gray-shirt10.png
在 pub 文件中不需要同一文件夹中的文件名,您可以这样做
assets:
- assets/shirt/
创建路径列表:
final paths = [
'assets/shirt/white-shirt1.jpg',
'assets/shirt/yellow-shirt2.jpg',
'assets/shirt/navyblue-shirt3.jpg',
'assets/shirt/blue-shirt4.png',
'assets/shirt/red-shirt5.jpg',
'assets/shirt/brown-shirt6.jpg',
'assets/shirt/maroon-shirt7.jpg',
'assets/shirt/lime-shirt8.jpg',
'assets/shirt/green-shirt9.jpg',
'assets/shirt/gray-shirt10.png'
];
现在,您可以简单地使用列表上的.map 而不是 List.generate。
children: paths.map((path) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(path), // Use the path here.
fit: BoxFit.cover,
),
),
),
);
}).toList(),
这是完整的代码:
final paths = [
'assets/shirt/white-shirt1.jpg',
'assets/shirt/yellow-shirt2.jpg',
'assets/shirt/navyblue-shirt3.jpg',
'assets/shirt/blue-shirt4.png',
'assets/shirt/red-shirt5.jpg',
'assets/shirt/brown-shirt6.jpg',
'assets/shirt/maroon-shirt7.jpg',
'assets/shirt/lime-shirt8.jpg',
'assets/shirt/green-shirt9.jpg',
'assets/shirt/gray-shirt10.png'
];
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Scaffold(
backgroundColor: Colors.white,
body: GridView.count(
crossAxisCount: 2,
children: paths.map((path) {
return new Card(
elevation: 9.0,
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0)),
child: new Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(path), // Use the path here.
fit: BoxFit.cover,
),
),
),
);
}).toList(),
),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.