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