Адаптивная разметка

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

Примечание: Просмотрите примеры в указанном порядке, поскольку они используют один и тот же пример. Переход к разделам может вызвать путаницу.

Глобальные свойства

Начнем с демонстрации того, как изменяются значения ширины и высоты экрана при переключении между устройствами в тестовом режиме.

Сначала создайте новый проект. На главной странице внутри родительского Column добавьте два виджета Text. Подпишите один «Screen Width», а другой — «Screen Height».

Далее мы отобразим изменяющиеся значения рядом с этими заголовками. Для каждого виджета Text установите значение переменной. Выберите Combine Text из опций. Значение первого Text должно быть либо «Screen Width: », либо «Screen Height: ».

Затем добавьте еще одно значение Text, которое покажет соответствующее значение. Это второе значение Text также устанавливается из переменной. Выберите 'Global Properties' и затем укажите либо 'Screen Width', либо 'Screen Height' из списка. Эти опции содержат текущие значения ширины/высоты экрана. Повторите этот процесс для обоих виджетов Text.

Теперь, когда вы перейдете в тестовый режим и попробуете разные устройства, значения ширины и высоты экрана обновятся соответственно.

Запуск приложения в тестовом режиме для размеров экрана настольного устройства

Запуск приложения в тестовом режиме для размеров экрана мобильного устройства

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

Expanded & Flex

Давайте разберем фундаментальный метод адаптации колонок и строк к разным ширинам и высотам экрана. При проектировании Row или Column важно избегать назначения фиксированных размеров дочерним элементам, если это не требуется дизайном.

Возьмем, к примеру, панель навигации, которую мы создаем для веб-версии. Она включает название страницы, несколько иконок навигации и строку поиска. Обратите внимание, как строка поиска регулирует свою длину в зависимости от доступной ширины. Эта адаптивность достигается за счет того, что ширины дочерних элементов установлены относительно доступного пространства в горизонтальной секции.

Чтобы спроектировать такую же панель навигации, создайте следующую иерархию виджетов:

- Container (named as webHeader)
       - Row
             - Row
             - TextField (named as searchBar)
             - IconButton

Вторая Row дополнительно разбита на следующее:

- Row 2
    - Text (named as pageName)
    - Row 3 (named as navIcons)
        - IconButton
        - IconButton
        - IconButton

Как видно, строка поиска в настоящее время занимает максимум доступного пространства. Однако мы хотим, чтобы Row 2 и searchBar делили пространство поровну. Для этого просто настройте свойства виджета.

Для Row 2 установите свойство Expansion в Flexible (средняя иконка) и назначьте значение Flex равным 1. Повторите те же шаги для searchBar. Это изменение обеспечивает распределение пространства в соотношении 1:1 на основе доступного. После этой настройки вы заметите, что оставшееся пространство после размещения search IconButton справа равномерно распределяется между Row 2 и searchBar.

Мы рекомендуем протестировать с разными размерами веб-экрана, чтобы увидеть, насколько хорошо это адаптируется.

В зависимости от потребностей дизайна существуют различные подходы к управлению пространством. Рассмотрим другой сценарий: что, если мы хотим, чтобы searchBar всегда занимала 40% ширины экрана, а Row 2 — оставшееся пространство после размещения searchBar и search IconButton?

Для этого сначала установите ширину searchBar в 40% и расширение в Default (первая иконка).

Далее настройте свойство Expansion виджета Row 2 на Expanded (третья иконка). С этими настройками вы увидите, что Row 2 теперь занимает все оставшееся пространство после выделения 40% для searchBar и размещения search IconButton.

Примечание: Мы добавили некоторый отступ и улучшили пользовательский интерфейс searchBar, чтобы повысить его привлекательность.

Вы также можете улучшить расстояние между pageName и navIcons, изменив MainAxisAlignment на Space Between (последняя иконка).

Не стесняйтесь протестировать это с разными размерами экрана, чтобы увидеть, насколько эффективно оно адаптируется к доступному пространству.

Метод Wrap

Еще один эффективный метод повышения адаптивности строки или колонки, содержащей несколько элементов, — использование виджета Wrap.

Рассмотрим сценарий с Row из карточек категорий.

Вы можете заметить, что при изменении размера экрана до мобильных размеров карточки начинают обрезаться по краям.

Чтобы решить эту проблему, просто замените родительский виджет Row на Wrap.

Убедитесь, что в свойствах Wrap направление Wrap Direction установлено в 'Horizontal'. Тогда вы увидите, что ранее переполнявшие карточки аккуратно перемещаются на следующую строку, как показано в примере.

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

Адаптивные точки останова

Переходя к более сложным сценариям разметки, где пользовательский интерфейс существенно отличается между мобильными и веб-платформами, важно сначала понять точки останова.

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

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

Настройка адаптивных точек останова

Перейдите в настройки темы > Design System и найдите раздел Breakpoints с уже установленными значениями по умолчанию. Вы можете настроить их при необходимости.

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

Видимость панели навигации и App Bar

Во многих дизайнах App Bar и Nav Bar обычно включаются в мобильные или мобильные + планшетные экраны и часто опускаются в форматах для настольных компьютеров. FlutterFlow упрощает включение или отключение Nav Bar и App Bar.

Просто перейдите в App Settings, выберите Nav Bar & App Bar и переключите опцию 'Show Nav Bar'. После включения вы увидите дополнительные настройки. Иконки для мобильного, планшета, планшета (landscape) и настольного компьютера позволяют выбрать, где должна отображаться Nav Bar.

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

Теперь при тестировании непосредственно в редакторе наблюдайте, как панель навигации появляется только для размеров экрана мобильного и планшетного устройств. Этот же подход можно применить и к App Bar.

Адаптивная видимость

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

Чтобы решить это, мы можем использовать функцию Responsive Visibility в FlutterFlow для реализации отдельных дизайнов AppBar и SearchBar для мобильных устройств, сохраняя текущий дизайн для веб.

Представьте, что мы создали новый виджет mobileAppBar и добавили его в разметку. Этот виджет умно разделяет заголовок категорий и строку поиска вертикально и включает кнопку обратной навигации. Цель — активировать эту мобильную разметку для мобильных и планшетных экранов, сохраняя 'webHeader' для планшетных (landscape) и настольных представлений.

Для реализации перейдите в свойства виджета и переключите иконки устройств, как показано в следующем демо.

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

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

Адаптивные значения

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

возможные случаи использования

• Адаптивные разметки: Автоматическая корректировка размеров элементов для обеспечения последовательного пользовательского интерфейса на всех устройствах.
• Лучшая читаемость: Увеличение размера шрифта на больших экранах для улучшения читаемости.
• Улучшенные отступы: Использование разных отступов или полей на планшетах и настольных компьютерах для оптимизации потока контента.

Чтобы установить адаптивное значение, выберите виджет и выберите свойство, поддерживающее адаптивность. Нажмите Set from Variable > Responsive Value, затем введите разные значения для каждого размера экрана:

• Mobile (ниже Breakpoint Small)
• Tablet (ниже Breakpoint Medium)
• Desktop (ниже Breakpoint Large)
• Wide (выше Breakpoint Large)

При просмотре на разных устройствах свойство автоматически скорректируется в зависимости от выбранного размера экрана.

Настройка точек останова

Вы можете изменить стандартные точки останова размеров экрана (мобильные, планшетные, настольные, широкие) в настройках темы FlutterFlow. См., как Customize Breakpoints.