Добавить рамку / текст к изображениям, созданным с помощью PhotoViewGallery - PullRequest
Новая
       40

Добавить рамку / текст к изображениям, созданным с помощью PhotoViewGallery

0 голосов
/ 19 марта 2020

Я использую PhotoViewGallery.builder, чтобы показать список фотографий. Теперь я хочу добавить рамку и текст к фотографиям. Моя проблема в том, что построитель PhotoViewGallery принимает только как возвращаемый виджет PhotoViewGalleryPageOptions, и в классе нет свойства child, border, text, ...

Здесь вы видите фрагмент моего кода, используя the 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 :. У вас есть предложения, как это решить?

1 Ответ

0 голосов
/ 19 марта 2020

Я нашел решение. Класс 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,
      );
    },
...