Холст
Холст отображает экран устройства, который может быть мобильным, планшетным, веб- или десктопным. Он позволяет добавлять виджеты методом перетаскивания. Вы можете выбирать, перемещать и позиционировать виджеты в любом месте на Холсте.
Он поддерживает регулировку уровня масштабирования и просмотр в светлом или тёмном режиме. Также здесь есть функции для предварительного просмотра на нескольких языках, добавления панели приложений и панели навигации, имитации отображения с увеличенным шрифтом и многое другое.
Экран предварительного просмотра
Это холст экрана устройства, на котором вы можете строить пользовательский интерфейс. Вы можете настроить экран, добавляя виджеты методом перетаскивания из палитры виджетов и применяя свойства, доступные в панели свойств.
Показать или скрыть меню навигации
Отсюда вы можете открыть или закрыть меню навигации.
Элементы управления масштабом
Здесь есть кнопки увеличения ( + ) и уменьшения ( - ) масштаба для управления уровнем масштабирования холста. При работе над сложными дизайнами пользовательского интерфейса это очень удобно: вы можете увеличить масштаб для детального просмотра определённой области, а затем уменьшить, чтобы получить общий обзор.
Страница, сгенерированная ИИ
Отсюда вы можете создать страницу с помощью ИИ.
Добавить панель приложений
Отсюда вы можете добавить панель приложений на вашу страницу. Нажатие на эту кнопку открывает всплывающее окно с различными стилями панели приложений для выбора. Просто выберите любой стиль из списка, и он появится на экране предварительного просмотра.
Предварительный просмотр на нескольких языках
Если вы включили функцию поддержки нескольких языков для вашего проекта, вы можете использовать это для просмотра приложения на разных языках. Просто выберите язык из выпадающего меню, и текст в вашем приложении будет переведён соответственно.
Эта функция полезна для тестирования приложения в разных локалях без необходимости его запуска.
Тёмный/светлый режим
Этот переключатель позволяет переключаться между светлым и тёмным режимами в вашем приложении, чтобы убедиться, что дизайн выглядит отлично в обоих режимах. Эта функция доступна только если вы включили поддержку тёмного режима в вашем проекте.
Отображение устройства
Вы можете использовать это для показа рамки устройства в предварительном просмотре. Это особенно полезно для проверки того, как будет выглядеть экран с учётом особенностей устройства, таких как безопасная область или вырезы на iPhone и Android-устройствах.
Ручки изменения размера
Включение ручек изменения размера отобразит их на правой и нижней сторонах экрана предварительного просмотра. Это позволяет изменить размер экрана предварительного просмотра, чтобы лучше протестировать приложение на экране с пользовательским разрешением и общую отзывчивость.
Показать или скрыть клавиатуру
При включении этой опции на экране предварительного просмотра устройства отображается виртуальная клавиатура. Это особенно полезно для визуализации пользовательского интерфейса с отображаемой клавиатурой.
Визуализация увеличенного шрифта
Это позволяет имитировать, как выглядит ваше приложение, когда пользователи изменяют масштаб текста или настройки доступности на своих устройствах. Это важно для создания приложения, которое визуально привлекательно и доступно, особенно для тех, кто нуждается в большем размере текста.
Настройки холста
Безопасная область
Безопасная область — это концепция в мобильном дизайне, которая предотвращает перекрытие содержимого физическими особенностями устройства, такими как вырезы для камеры, датчики и ли закруглённые края дисплея. В этом контексте FlutterFlow предлагает переключатель Безопасной области, который позволяет включать или отключать эту функцию по необходимости.
Привязка при изменении размера
При изменении размера виджета вы можете привязывать его размер к конкретным значениям в пикселях или к проценту от размера экрана.
Изменение цвета холста
Изменение цвета холста может быть полезным при создании компонентов, особенно когда вы хо тите просмотреть их на фоне цвета страницы. Например, если у вас есть текстовый компонент чёрного или тёмного цвета, а фон по умолчанию тоже тёмный, изменение цвета холста на более светлый оттенок улучшит видимость и упростит процесс дизайна.
Добавить панель навигации
Эта кнопка позволяет добавить панель навигации на вашу страницу. Нажатие на эту кнопку открывает всплывающее окно, которое позволяет включить панель навигации для вашего проекта. После включения панели навигации вы можете настроить её в соответствии с вашим дизайном.
Видеоролик
Посмотрите это видео, если предпочитаете видеоуро к.