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