Question

如何在 Gridview 中加载我的资产/衬衫的所有图像？我在五月资产/衬衫中有 10 张照片

这是我现有的用于创建 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(),
    ),
  );
}

如何在gridview中加载所有可能的图像？使用颤振

1 个答案: