Фоны

Задайте фон любого экрана в разделе Fill настроек Screen settings:

Однослойный фон: цвет, градиент, изображение или видео.
Многослойный фон: например, изображение с тонированием.

Если вы добавите тёмную тему и применяете переиспользуемый стиль, можно задать разные фоны для светлой и тёмной темы.

Tip

Чтобы превратить фон в hero-изображение, поместите контент в выдвижной слой.

Изображение

Screen settings with one Image layer in the Fill section, and the image picker on the Custom tab

Загрузите файл .JPG, .PNG или .WEBP размером до 20 МБ. Изображение масштабируется, чтобы полностью закрыть фон.

Note

Фоновые изображения и видео заполняют весь viewport, включая области за вырезом и системными панелями — даже если включена Safe area. Размещайте важный контент подальше от краёв, чтобы он не обрезался.

Чтобы заменить фоновое изображение во время выполнения из кода приложения, включите пользовательский медиа-идентификатор.

Видео

Screen settings with one Video layer in the Fill section, and the video picker with the Loop checkbox

Загрузите файл .MP4 или .WEBM размером до 50 МБ. В превью отображается статичный кадр — но на устройстве видео воспроизводится в реальном времени.

Включите Loop, чтобы видео воспроизводилось по кругу.

Чтобы менять фоновое видео во время выполнения, включите пользовательский медиа-ID.

Сплошной цвет

Настройки экрана с одним слоем сплошного цвета в разделе Fill, и палитра цветов на вкладке Custom

Введите шестизначное hex-значение, например #FFFFFF, и задайте непрозрачность от 0 до 100%. Сокращённое значение блокирует публикацию.

Градиент

Создание многоточечного линейного градиента:

Direction — поворот градиента от 0 до 360°.
Stops — чтобы переместить стоп, перетащите его вдоль полосы. Чтобы добавить стоп, кликните по полосе или нажмите рядом со Stops. Чтобы изменить позицию, шестизначный hex-код или непрозрачность стопа, отредактируйте его строку.
Opacity — ползунок в строке слоя масштабирует все стопы одновременно, сохраняя переходы между ними.

Используйте фон как hero-изображение

Основная статья: Скользящий шит

Во флоу hero-изображение строится из фона экрана и Sliding sheet. Шит перекрывает нижнюю часть экрана и поднимается поверх фона при прокрутке.

Установите Fill экрана в значение Image или Video и загрузите hero-изображение.
Откройте панель Add element и выберите Layout > Sliding sheet.
Задайте Start position шторки — долю экрана, которую она занимает снизу. При значении по умолчанию 55% фон виден в верхних 45% экрана.
Добавьте содержимое внутрь листа.
Чтобы наложить заголовок или логотип поверх изображения героя, добавьте эти элементы за пределами листа. Они отображаются поверх фона экрана.
При необходимости измените Start position, чтобы изменить размер листа. Установить абсолютную высоту для этого элемента невозможно.

Затемнение фона

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

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

Чтобы изменить порядок слоёв, перетащите их строки. Чтобы удалить слой, нажмите в его строке.

Слой градиентного тинта на 67% поверх слоя изображения в списке Fill

Показать другой фон в тёмном режиме

Основная статья: Тёмный режим

Чтобы показать другой фон в тёмном режиме:

Если у флоу нет тёмной темы, добавьте её.
Сохраните слой фона как цветовой стиль.
Если фон содержит тонирование, сохраните слой тонирования как цветовой стиль тоже.
Измените тёмное значение каждого стиля.