向PhotoViewGallery创建的图像添加边框/文字

Question

我正在使用PhotoViewGallery.builder显示照片列表。现在，我想在照片上添加边框和文字。我的问题是，PhotoViewGallery的生成器仅接受PhotoViewGalleryPageOptions作为返回小部件，并且在类内，没有用于子项，边框，文本等的属性...

您在这里使用PhotoViewGallery看到了我的代码的片段

   final List<Boulder> boulder;
   ...

   body: Container(
      child: PhotoViewGallery.builder(
        itemCount: boulder.length,
        pageController: PageController(initialPage: index),
        scrollPhysics: const BouncingScrollPhysics(),
        builder: (BuildContext context, int index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: NetworkImage(boulder[index].image),
            initialScale: PhotoViewComputedScale.contained * 0.8,
            minScale: PhotoViewComputedScale.contained * 0.8,
          );
        },
      ),
    ),

通常，我将Container＆BoxDecoration与DecorationImage一起使用来解决此问题，但在那种情况下，不能在builder：属性中使用Container。您对如何解决此问题有任何建议吗？

Answer 1

我已经找到了解决方案。类PhotoViewGalleryPageOptions可以像这样使用：PhotoViewGalleryPageOptions.customChild（...）。为了添加边框和文本，我使用了一个带有BoxDecoration和DecorationImage

的容器

builder: (BuildContext context, int index) {
      return PhotoViewGalleryPageOptions.customChild(
        child: Container(
          child: bShowName ? InfoText(boulder: boulder, index: index) : Spacer(),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              border: Border.all(
                color: difficultyMap[boulder[index].difficulty],
                width: 2,
              ),
              image: DecorationImage(fit: BoxFit.cover, image: NetworkImage(boulder[index].image))),
        ),
        initialScale: PhotoViewComputedScale.contained * 0.8,
        minScale: PhotoViewComputedScale.contained * 0.8,
      );
    },