Пользовательский интерфейс Flutter ломается, когда в настройках разработчика изменяется "наименьшая ширина". - PullRequest
Новая
       6

Пользовательский интерфейс Flutter ломается, когда в настройках разработчика изменяется "наименьшая ширина".

0 голосов
/ 29 мая 2020

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

enter image description here

Если я попытаюсь изменить параметр «наименьшая ширина» в параметрах разработчика и установить на другое значение, отличное от значения по умолчанию, весь пользовательский интерфейс будет разбит, как показано.

enter image description here

enter image description here

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

Спасибо за ваше время.

1 Ответ

1 голос
/ 29 мая 2020

Это потому, что вы используете отступы от краев с 

Positioned(
  child: Transform.rotate(
    angle: 180,
    child: UNOcard(UNOcardData(CardTypes.BACK)),
  ),
  top: 100,
  left: 65,
),

. Этот верх означает, что он будет позиционироваться на 100 единиц сверху. На самом деле вам нужно некоторое процентное смещение от центра. Вы можете сделать это так: 

Positioned.fill(
  child: Align(
    // (0, 0) is the center, (1, 1) is right bottom, (-1, -1) is left top and so on
    alignment: Alignment(0.25, 0.25), 
    child: YOUR_WIDGET
  )
);

Для более отзывчивого пользовательского интерфейса вы можете получить screen_sizes с помощью MediaQuery.of (context) или использовать такой пакет, как flutter_screenutil , чтобы масштабируйте пользовательский интерфейс в соответствии с образцом, например, экран 1080x1920.

...