Flutter - адаптивное отображение изображений? - PullRequest
Новая
       59

Flutter - адаптивное отображение изображений?

0 голосов
/ 03 апреля 2020

Добрый вечер,

Я искал много часов и не могу найти решение. Я установил полноэкранное изображение, и с помощью стека я установил несколько GestureDetectors. Мне удалось нажать GestureDetector и вызвать функцию. Проблема заключается в том, что при изменении размера экрана на новый или более старый телефон изображение реагирует и покрывает весь экран, но функция Positioned (), конечно, остается на том же месте, поэтому сопоставления изображения больше не корректны.

Есть ли способ заставить Позиционированный быть отзывчивым? Или, может быть, совершенно другим способом достижения желаемого результата?

Пожалуйста, помогите мне:) 

class Overview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double sh = MediaQuery.of(context).size.height;
    double sw = MediaQuery.of(context).size.width;
    return Scaffold(
      drawer: AppDrawer(),
      body: Stack(
        children: <Widget>[
          Container(
            height: sh,
            width: sw,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/ang7.png'),
                    fit: BoxFit.cover)),
          ),
          Positioned(
            left: 10,
            top: 50,
            child: IconButton(
              icon: Icon(Icons.menu),
              iconSize: 30,
              color: Colors.white,
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
        Positioned(
        left: left,
        top: top,
        child: GestureDetector(
          // child: Icon(Icons.add_circle),
          onTap: () => Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return Amenities(
                tText[page][0],
                tText[page][1],
                tText[page][2],
              );
            },
          )),
          child: Container(
            height: 35,
            width: 50,
            color: Colors.blue,
          ),
        ));
          ),

1 Ответ

0 голосов
/ 03 апреля 2020

Публикация моего комментария в качестве ответа на тот случай, если он работает, и нет более качественных ответов. Пожалуйста, проголосуйте и отметьте как ответили, если это так. : -)

Вы можете попробовать поэкспериментировать с MediaQuery.of, чтобы определить размер устройства (высоту и ширину), а затем использовать эти значения для масштабирования параметров положения виджетов с позиционированием вверх или вниз от ваших «базовых» размеров. , Теоретически это должно (может) соответствовать тому, как масштабировалось фоновое изображение. Возможно, потребуется также масштабировать размер виджетов с позиционированием.

Обновление относительно вашего комментария:

Не совсем. Я имею в виду, что вам нужно будет запустить MediaQuery.of на устройстве, которое вас устраивает в макете пользовательского интерфейса, и записать ширину и высоту этого устройства. Затем вы используете эти ширину и высоту в своем приложении и сравниваете эти «базовые» значения с теми значениями, которые вы получаете при запуске приложения на других устройствах.

Итак: разделите ширину другого устройства на baseline-device-width, чтобы получить коэффициент масштабирования ширины. Разделите other-device-height на baseline-device-height, чтобы получить коэффициент масштабирования высоты.

Затем используйте эти коэффициенты масштабирования для «масштабирования» ширины позиционированных виджетов (position-widget-width, умноженной на width-scaling- factor) и height (position-widget-height, умноженное на height-scaling-factor) и положение на экране (вам придется поиграться со значениями позиционирования).

Звучит неопрятно, но это просто математика.

Как я уже сказал, может не сработать или не самое элегантное решение. Существует так много разных устройств, что вы никогда не сможете полностью протестировать это. Возможно, вам нужно переосмыслить ваш интерфейс. Может быть, у некоторых людей есть идеи по этому поводу.

...