Flutter для iOS-адаптивный макет
Я повернул экран на iPhone, и это сработало, так что, во-первых, пока нет жестко закодированных проблем с позиционированием пользовательского интерфейса с виджетами и каркасом.
Руководство Apple по человеческому интерфейсу рекомендует использовать макет с разделенным представлением вместо панели вкладок на iPad.
Основываясь на текущих экранах телефонов, нам нужно что-то вроде этого:
И немного информации и логики для обнаружения устройства и выбора подходящего макета.
Ta Da
В следующем посте мы добавим функциональность в новый разделенный экран и решим, на каких устройствах и в каких ориентациях он будет доступен.
XP
Для такого, казалось бы, простого изменения, адаптирующего макет под разные устройства, мне пришлось учесть ряд сложных архитектурных моментов и внести некоторые структурные изменения.
Надеюсь, они помогут сохранить кодовую базу чистой и работоспособной по мере роста приложения.
Информация об устройстве и макет.
Добро пожаловать в мир курицы и яйца, основанный на данных асинхронных вызовов.
Чтобы выбрать между вкладками или разделенным представлением, мне нужно знать о клиентском устройстве и его ориентации.
Однако информация об устройстве доступна только после загрузки приложения и построения экрана.
Чтобы обойти это, я создал виджет «LayoutSelector» и новый поставщик уведомлений об изменениях под названием «Layout».
При первом запуске приложения информация об устройстве недоступна и отображается пустой экран.
Когда вызов информации об устройстве завершается, он устанавливает значение поставщика «Layout», который затем уведомляет «LayoutSelector» о необходимости перестроить.
На этот раз он имеет информацию об устройстве и может выбирать между вкладкой или разделенным макетом.
Пользовательский интерфейс работает хорошо, потому что все фоны макета имеют одинаковый цвет, поэтому изменение экрана между загрузкой и выбранным макетом устройства остается незамеченным.
Теперь у нас есть загрузочный экран, есть возможность улучшить Ux, когда что-то занимает больше времени, чем обычно, т. е. добавить прикольную анимацию, которая отображается, если приложению требуется больше секунды для загрузки макета.
Это кажется правильным путем, но я приветствую комментарии по этому поводу.
Стоит отметить, что я пытаюсь сделать состояние приложения простым и просто использую провайдеров вместо пакета DI.
Импорт пакетов
Я добавил еще одно требование в контрольный список «Готово, Готово, Готово, Готово» для разработки.
- Относительный импорт для детей и пакетный импорт для всего остального.
Было заманчиво просто использовать импорт пакетов, но наличие относительных для дочерних пакетов упрощает перемещение папок в каталоге \lib.
Позже в этой серии будет блог о контрольном списке «сделано, сделано, сделано, сделано».
Структура проекта
Пришло время немного больше структурировать, так как количество файлов и каталогов растет.
До этого момента все экраны находились в каталоге /lib/tab. Теперь они разделены с разделенным представлением, они были разделены, и у нас есть три каталога.
- \lib\ui\tab
- \lib\ui\screen (Используется вкладками и раздельными панелями просмотра.)
- \lib\ui\splitview
Количество каталогов верхнего уровня также увеличилось, поэтому я добавил \ui на верхний уровень и переместил ряд элементов верхнего уровня под него.
Я следую общему правилу 7, никогда не более 7 предметов на данном уровне. Не уверен, от кого я взял это правило.
Ссылки
- Код этой статьи
- Создание отзывчивых и адаптивных приложений
- Руководство Apple по раздельному просмотру
- Руководство Apple по адаптивности и компоновке
- Рекомендации Apple по навигации
- Адаптивные макеты во Flutter: Split View и Drawer Navigation
- Относительный и пакетный импорт
Звук и изображение
Еще кое-что…
«Мы не проводим маркетинговых исследований. Мы не нанимаем консультантов. Мы просто хотим делать отличные продукты».
Стив Джобс_