如何在 gridview 中加載所有可能的圖像？ 使用 flutter

Question

如何在 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

Answer 1

在 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(),
    ),
  );
}