Backgrounds

Thêm nền cho bất kỳ màn hình nào trong phần Fill của Screen settings:

Nền một lớp: Màu đơn, gradient, hình ảnh hoặc video.
Nền nhiều lớp: Ví dụ, một hình ảnh kết hợp với tint.

Nếu bạn thêm giao diện tối và áp dụng style tái sử dụng, bạn có thể đặt các nền khác nhau cho giao diện sáng và giao diện tối.

Tip

Để biến nền thành ảnh hero, hãy đặt nội dung vào một sliding sheet.

Hình ảnh

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

Tải lên tệp .JPG, .PNG, hoặc .WEBP tối đa 20 MB. Hình ảnh sẽ tự động co giãn để phủ toàn bộ nền.

Note

Hình ảnh và video nền lấp đầy toàn bộ viewport, kể cả các khu vực phía sau notch và thanh hệ thống — ngay cả khi Safe area được bật. Hãy giữ nội dung quan trọng tránh xa các cạnh để không bị cắt xén.

Để hoán đổi hình ảnh nền trong thời gian chạy từ mã ứng dụng của bạn, hãy bật ID media tùy chỉnh.

Video

Tải lên file .MP4 hoặc .WEBM tối đa 50 MB. Phần xem trước hiển thị một khung tĩnh — nhưng video sẽ phát trên thiết bị khi chạy thực tế.

Bật Loop để phát lại video liên tục.

Để thay đổi video nền lúc runtime, hãy bật custom media ID.

Màu đơn sắc

Screen settings with one solid color layer in the Fill section, and the color picker on the Custom tab

Nhập giá trị hex sáu chữ số, ví dụ #FFFFFF, và đặt độ mờ từ 0 đến 100%. Giá trị viết tắt sẽ chặn việc xuất bản.

Gradient

Tạo gradient tuyến tính nhiều điểm dừng:

Direction — xoay gradient từ 0 đến 360°.
Stops — để di chuyển một stop, kéo nó dọc theo thanh. Để thêm stop, nhấp vào thanh hoặc bên cạnh Stops. Để thay đổi vị trí, giá trị hex sáu chữ số hoặc độ mờ của một stop, chỉnh sửa hàng của nó.
Opacity — thanh trượt trên hàng của layer điều chỉnh tất cả các stop cùng lúc, giữ nguyên hiệu ứng chuyển màu giữa chúng.

Dùng background làm hình ảnh hero

Bài viết chính: Sliding sheet

Trong flow, bạn tạo hình ảnh hero từ background của màn hình và một Sliding sheet. Sheet che phần dưới của màn hình và trượt lên phía trên background khi người dùng cuộn.

Đặt Fill của màn hình thành Image hoặc Video, rồi tải lên hình ảnh hero.
Mở bảng Add element và chọn Layout > Sliding sheet.
Đặt Start position cho sheet — tỷ lệ màn hình mà sheet che phủ, tính từ dưới lên. Với giá trị mặc định 55%, phần nền hiển thị qua 45% phía trên.
Thêm nội dung vào bên trong sheet.
Để phủ tiêu đề hoặc logo lên trên ảnh hero, hãy thêm các phần tử đó bên ngoài sheet. Chúng sẽ hiển thị phía trên nền màn hình.
Thay đổi Start position để thay đổi kích thước sheet nếu cần. Bạn không thể đặt chiều cao tuyệt đối cho phần tử này.

Tô màu nền

Văn bản đặt trên ảnh hoặc video chỉ dễ đọc ở những vùng mà nội dung phía sau đủ tối. Để làm đều bề mặt đó, hãy xếp chồng một lớp bán trong suốt lên trên nội dung media:

Trong Screen settings, đặt layer Fill thành hình ảnh hoặc video của bạn.
Để thêm layer thứ hai, nhấp bên cạnh Fill. Layer mới sẽ xuất hiện ở đầu phần Fill và phủ lên trên media.
Nhấp vào ô màu của layer và chọn Gradient . Để làm tối chỉ cạnh chứa nội dung văn bản, hãy kéo gradient từ điểm dừng mờ đục ở cạnh đó đến điểm dừng trong suốt ở cạnh còn lại.
Để điều chỉnh độ đậm của tint, kéo thanh trượt trên hàng của layer đó.

Để thay đổi thứ tự các layer, hãy kéo các hàng của chúng. Để xóa một layer, nhấp vào trong hàng của nó.

A gradient tint layer at 67% over an image layer in the Fill list

Hiển thị nền khác trong chế độ tối

Bài viết chính: Chế độ tối

Để hiển thị nền khác trong chế độ tối:

Nếu flow chưa có giao diện tối, hãy thêm vào.
Lưu lớp nền dưới dạng color style.
Nếu nền có tint, hãy lưu lớp tint dưới dạng color style.
Thay đổi giá trị tối của từng style.