Отзывчивый макет Flutter
Я работаю над созданием мобильного приложения с использованием флаттера и застрял в создании адаптивного макета экрана входа в систему. Чтобы быть точным, я использую MediaQuery, чтобы найти размер экрана и найти безопасную область, и на основе этого я размещаю и создаю контейнеры на основе процента высоты экрана. Я хотел бы знать, является ли это лучшим способом или я излишне усложняю весь процесс. Я наткнулся на несколько видеороликов на YouTube, где большинство из них дают случайные числа, но когда я пытаюсь это сделать, мой макет чаще всего заканчивается переполнением!
До сих пор я в основном делал это только с помощью математических вычислений. т.е. я придерживался расчета доступной высоты (общая высота - безопасная зона), а затем построил все свои контейнеры на основе этой высоты (включая расстояние между ними). Но я изо всех сил пытаюсь получить правильный размер шрифта, и эта постоянная борьба за баланс пользовательского интерфейса в настройках Android и iOS отнимает большую часть моего времени.
1 ответ
Я построил сотни экранов во Flutter. Очень редко вам нужно использовать точную высоту экрана для макета. Большинство экранов попадают в одну из трех категорий:
- Элементов слишком много, чтобы поместиться на экране любого размера.
В этом случае вы заключаете свой макет в виджет SingleChildScrollView, у которого есть дочерний столбец, а затем помещаете все остальные виджеты в этот столбец. Пользователи прокручивают вниз, чтобы увидеть все видимые элементы, которые им нужно видеть.
- Элементов слишком много, чтобы поместиться на экранах меньшего размера, но они подходят для экранов большего размера.
В этом случае вы по-прежнему оборачиваете свой макет в виджет SingleChildScrollView. Затем вы делаете свой макет красивым на больших экранах, но пользователям на меньших экранах все равно приходится прокручивать страницу вниз. Это не идеально, но иногда это правильное решение. Уменьшение размеров элементов дизайна на маленьком экране часто затрудняет их использование или даже делает его полностью непригодным для использования. Кроме того, наличие различных вычислений, связанных с размером экрана в вашей логике макета, превращает тестирование вашего приложения в кошмар: вы должны тестировать его на всех размерах экрана.
- Все элементы дизайна могут поместиться на маленьком экране.
В этом случае вам следует использовать виджеты Flex (такие как Column, Row, Spacer, Center и т. д.) для создания макета. Эти виджеты уже имеют логику для размещения своих дочерних элементов в доступном пространстве (например, с помощью свойств mainAxisAlignment и crossAxisAlignment в Column и Row).
Также есть виджеты, которые могут занимать заданный процент экрана (или их родительский виджет), но я ими никогда не пользуюсь. Я могу представить себе ситуации, когда эти виджеты могут быть полезны, но для подавляющего большинства проектов использование макета Flex является лучшим вариантом, который приводит к лучшему внешнему виду экранов.
Если вы разместите свой дизайн и макет, который вы придумали, мы можем указать, есть ли способы его оптимизировать.