Разместить виджет в точной координате внутри изображения

#image #flutter #zooming #image-scaling

#изображение #flutter #масштабирование #масштабирование изображения

Вопрос:

В моем приложении у меня есть изображение, которое можно увеличивать или уменьшать. Я хочу разместить другой виджет поверх изображения и заставить их масштабироваться одновременно.

Идея в том, что на первом изображении есть окно. Я хочу разместить 2-е изображение в области окна.

Я получил масштабирование изображения, работающее со следующим кодом. Чего я не знаю, так это как разместить другой виджет в точной области внутри 1-го изображения.

 _buildWindowImage() {
    return Transform.scale(
      scale: _imageScale,
      alignment: Alignment.topCenter,
      child: Image.asset(
        'assets/images/background/window_1.png',
        fit: BoxFit.contain,
      ),
    );
  }

Может кто-нибудь оказать некоторую помощь в этом.

1. Вы можете использовать стек или даже контейнер и изображение в качестве декоратора, а затем в дочернем элементе контейнера добавить другое изображение.

2. используйте CustomPainter , где вы будете рисовать оба изображения

3. Я могу использовать стек для размещения нового изображения поверх другого изображения. Но как мне настроить точное положение?

4. Есть ли другой вариант, кроме CustomPainter? В конечном итоге я хочу отобразить видео вместо 2-го изображения.

Ответ №1:

вы можете сделать

 _buildWindowImage() {
return Transform.scale(
      scale: _imageScale,
      alignment: Alignment.topCenter,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              'assets/images/background/window_1.png',
            ),
            fit: BoxFit.contain,
          ),
        ),
        child: Center(_put_another_widget_here),
      ),
    );
  }
}

1. Я не хочу размещать 2-е изображение в центре. Мне нужен способ разместить его в точном месте.

2. тогда, возможно, вы можете использовать Stack, а затем наложить дочерние элементы друг на друга или использовать Positioned для установки координат.