为使用PhotoViewGallery创建的图像添加边框/文本

Question

我正在使用PhotoViewGallery.builder来显示照片列表。现在我想给照片添加一个边框和文字。我的问题是，PhotoViewGallery的生成器只接受小部件PhotoViewGalleryPageOptions作为返回，并且在类中，没有child、border、text。。。

在这里，您可以看到我使用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&BoxDecorationImage来解决这个问题，但在这种情况下，Container不能在builder:property中使用。你对如何解决这个问题有什么建议吗？

Answer 1

我找到了解决方案。类PhotoViewGalleryPageOptions可以这样使用：PhotoViewGallaryPageOptions.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,
);
},