Адаптивный подход к дизайну Flutter

#flutter #dart #responsive-design #flutter-layout #responsive

#flutter #dart #адаптивный дизайн #flutter-макет #адаптивный

Вопрос:

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

проектирование в зависимости от размера экрана.
создавайте отдельные макеты для разных размеров экрана или точек останова!

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

Ответ №1:

Лучше всего использовать одинаковые размеры на разных экранах. Flutter использует логические пиксели, которые не зависят от разрешения и соотношения экрана устройства. Таким Container образом, ширина 100 и высота 100 занимают одинаковое физическое пространство на 4-дюймовом и 7-дюймовом экранах. В вертикальной ориентации обычно настраивают виджеты на использование всей ширины, но только на несколько пикселей в высоту, и вставляют этот виджет ListView . Таким образом, на больших экранах вы можете разместить больше виджетов, но на всех них виджеты должны занимать одинаковое пространство.
Кроме того, иногда разработчики поддерживают горизонтальную ориентацию с различным расположением виджетов.

1. возможно, мой вопрос был неясен. в примере контейнера я хочу, чтобы он занимал одинаковую долю экрана во всех размерах экрана! (я добавил 2 изображения в свой пост, маленький и большой экран, которые представляют контейнер размером 100×100)

2. @FrozenForest Если вы хотите занимать ту же часть экрана, задайте ширину и высоту, что и некоторая часть MediaQuery.size . Но неправильно иметь все, что связано с размером экрана. Например, вы не хотите иметь больший размер шрифта на больших экранах.

3. на самом деле я хочу, чтобы некоторые части приложения были связаны с экраном, а не со всеми из них. я хотел знать, не вызовут ли такие элементы (width: screenSize * 0.25) каких-либо проблем, я использую его, иначе я делаю разные макеты для каждой точки останова.

Ответ №2:

Лучше всего использовать относительные меры и такие виджеты, как Expanded, Flexible, MediaQuery, FittedBox … среди других более продвинутых, например, изучение ограничений в Flutter

Ответ №3:

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

У них даже есть пример, который сделан с помощью этой демонстрации пакета