Как сделать так, чтобы стэк реагировал на флаттер? - PullRequest
Новая
       13

Как сделать так, чтобы стэк реагировал на флаттер?

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

Я хотел бы реализовать карту географии c с указателем положения с использованием виджета Stack в флаттере. Моя проблема в том, что когда я хочу указать точку P на моей карте, я указываю координаты (x, y), но эти координаты действительны только при использовании телефона с определенными размерами, но если я использую телефон с другим дисплеем размеры это также изменит положение моего индикатора положения, который не будет указывать мою точку P. Мой вопрос: использование виджета Stack правильно для этого типа проблемы? Если нет, что я могу использовать?

Вот фрагмент моего кода: 

          Stack(
                children: [
                  Image.asset(
                    'assets/images/map.png',
                     height: mediaQuery.size.height * 0.5,
                     width: mediaQuery.size.width,
                  ),
                  if (x != null && y != null)
                    Align(
                      heightFactor: 2,
                      widthFactor: 2,

                      alignment: Alignment(x, y),
                      child: Image.asset(
                        'assets/images/picker.png',
                        scale: 1.4,
                      ),
                    ),
                ],

1 Ответ

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

Вам необходимо ввести коэффициент масштабирования с новыми координатами X и Y, которые были масштабированы из исходного изображения. Кроме того, я склонен думать, что использование виджета «Позиционирование» лучше, чем виджета «Выравнивание», когда вы используете стек.

Масштабированные значения X и Y будут выглядеть примерно так: 

double scaleX(originalx, originalwidth, currentwidth){
  return(originalx * currentwidth / originalwidth);
}

double scaleY(originaly, originalheight, currentheight){
  return(originaly * currentheight / originalheight);
}

Затем вы можете использовать эти масштабированные значения точно так же, как исходные значения x и y на теперь масштабированной карте.

Чтобы сделать его более понятным, я создал дартпад, чтобы вы могли поиграть с ним: http://dartpad.dev/34ec25e551a58127b8635fc56744ff29

Зеленый контейнер предназначен для имитации вашего карта, и желтая точка желаемой точки. Вы можете изменить scalingFactorHeight и scalingFactorWidth в коде для имитации различных размеров экрана. Вы увидите, что желтая точка остается в центре, хотя значения x и y постоянны.

...