在同一个 GridView 中显示 db imagepicked 和资产文件的最佳实践

Question

我想深入了解在同一个 gridView 中显示来自资产和 imagePicked 图像（存储在数据库中）的图像的最佳方式是什么？我正在使用具有不同变量的 Photo 模型类来存储图像，使用 assetPath 来存储 assetimages，使用 fileName 来存储来自 db 的图像（这些通过实用方法转换为 Image.memory）。我看到的问题是我将图像存储在同一个列表中以便能够显示它们，但是当某些图像是 base64 而其他图像是 assetPath（字符串）时，这会引发问题。关于这个的最佳实践是什么？

这是我的测试代码。我在这里尝试检查照片是否包含 assetPath，如果是，则它是资产图像，否则它是 imagepicked 图像，然后我使用实用程序方法并将其显示为 Image.memory.

当我在物理设备上测试该应用程序时，它可以很好地显示资产图像，但数据库（图像选择）文件只是空方块（我想应该是因为 base64）。

我还可以提到图像拾取和数据库实用程序方法工作正常，所以我选择不在此处包含它们。如前所述，主要问题是在同一网格视图中显示从数据库文件中选取的资产和图像的最佳实践。

网格视图：

gridview2() {
    
    String image1 = ('images/lake.jpg');
    String image2 = ('images/flower1.png');

    Photo photo1 = Photo(id: 0, fileName: image1);
    Photo photo2 = Photo(id: 0, fileName: image2);

    images!.add(photo1);
    images!.add(photo2);

    return Padding(
        padding: const EdgeInsets.all(5.0),
        child: GridView.builder(
            itemCount: images!.length,
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                maxCrossAxisExtent: 200,
                crossAxisSpacing: 20,
                mainAxisSpacing: 20),
            itemBuilder: (BuildContext ctx, int index) {
              return Container(
                  decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.cover,
                    
                    //todo we need a check if String is database base64 or asset path??
                    image: images![index].fileName!.isNotEmpty
                        ? Image.asset(images![index].fileName!).image
                        : Utility.imageFromBase64String(
                                images![index].fileName!)
                            .image),
              ));
            }));
  }   

脚手架：

@override
  Widget build(BuildContext context) {
    

    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('ImagePicker Database test')),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () {
              setState(() {
          
                pickImagesFromGallery();
              });
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          Flexible(child: gridview2()),
        ],
      ),
    );
  }
}

initState函数：

void initState() {
    
    super.initState();
    images = [];
    dbHelper = DBHelper();
    
    refreshImages();
    
  }

刷新图像功能：

refreshImages() {
    
    dbHelper!.getPhotos().then((imgs) {
      setState(() {
        //Clears list
        images!.clear();
        //Add all images from imgs (database) to images list
        images!.addAll(imgs);
      });
    });
  }

从物理手机加载并添加一个选择的文件（变为空）：

Answer 1

我会调整你的照片模型，让 assetPath 和 base64String 有单独的字段。这样你就可以确定图像数据是什么样子的。

DecorationImage(
                    fit: BoxFit.cover,
                    image: images![index].fileName!.isNotEmpty
                        ? Image.asset(images![index].fileName!).image
                        : Utility.imageFromBase64String(
                                images![index].byteString!) // THIS
                            .image),
              )

我还要仔细检查你的 Utility.imageFromBase64String() 函数以确保它自己工作。