Một flow gồm một hoặc nhiều màn hình. Mỗi màn hình đại diện cho một bước trong hành trình của người dùng — ví dụ: một paywall, một bài quiz, hoặc một slide giới thiệu sản phẩm.

Các phần tử trên mỗi màn hình được tổ chức theo phân cấp layer.

Để quản lý màn hình, layer và các phần tử, hãy mở giao diện mặc định Screens and Layers. Giao diện này hiển thị trình tự màn hình và cấu trúc layer của từng màn hình.

Quản lý màn hình

Phần trên của bảng bên trái liệt kê tất cả màn hình trong flow. Mỗi mục hiển thị nhãn có số thứ tự và ảnh xem trước thu nhỏ.

• Chọn màn hình: Nhấp vào một mục màn hình để kích hoạt nó. Trình chỉnh sửa trực quan hiển thị màn hình được chọn, và phần Layers bên dưới cập nhật để hiển thị phân cấp layer của màn hình đó.
• Thêm màn hình: Nhấp vào nút ở đầu phần Screens để thêm một màn hình trống mới vào flow.
• Sắp xếp lại màn hình: Kéo và thả các mục màn hình để thay đổi thứ tự của chúng trong flow.

Thao tác với màn hình

Nhấp vào biểu tượng ba chấm trên một mục màn hình để mở menu ngữ cảnh.

Thao tác	Phím tắt	Mô tả
Play Animation		Xem trước các animation được cấu hình trên màn hình này
Copy	⌘C / Ctrl+C	Sao chép màn hình vào clipboard
Paste here	⌘V / Ctrl+V	Dán một màn hình đã sao chép trước đó
Duplicate	⌘D / Ctrl+D	Tạo bản sao của màn hình và thêm vào flow
Rename		Đổi tên hiển thị của màn hình
Delete	⌘⌫ / Ctrl+Del	Xóa màn hình khỏi flow

Điều hướng giữa các màn hình

Thứ tự màn hình trong danh sách không tự quyết định điều hướng. Để kết nối các màn hình, hãy sử dụng tương tác phần tử: cấu hình một nút để điều hướng người dùng đến màn hình khác.

Cài đặt màn hình

Để xem thuộc tính và cài đặt của màn hình đang hoạt động, nhấp vào vùng trống trên màn hình xem trước. Bảng bên phải sẽ chuyển sang giao diện cài đặt màn hình.

Giao diện hệ thống

Kiểm soát cách màn hình tương tác với phần cứng thiết bị.

• Safe area thêm padding để giữ nội dung không bị che bởi notch và thanh hệ thống.
• Status bar hiển thị hoặc ẩn thanh trạng thái hệ thống (giờ, pin, tín hiệu).

Đưa màn hình vào chỉ báo tiến trình

Nếu bạn thêm phần tử Progress Indicator vào flow, Adapty sẽ hiển thị nó trên mọi màn hình.

Bỏ chọn Include screen in progress indicator để ẩn chỉ báo tiến trình khỏi một màn hình cụ thể. Dùng tính năng này để làm gọn các màn hình chào mừng, paywall cuối cùng, hoặc bất kỳ bước nào bạn không muốn tính vào tiến trình.

Bố cục màn hình

Phần Layout xác định cách màn hình phân bổ các phần tử con. Các thuộc tính này có sẵn trên bất kỳ phần tử container nào.

• Free: Các phần tử con được định vị độc lập.
• Vertical: Các phần tử được sắp xếp từ trên xuống dưới, giống như flexbox column.
• Horizontal: Các phần tử được sắp xếp từ trái sang phải, giống như flexbox row.

Với bố cục dọc và ngang, bạn cũng có thể cấu hình khoảng cách và căn chỉnh.

• Alignment: Vị trí phần tử theo trục chéo.
• Gap: Khoảng cách giữa các phần tử liền kề.
• Distribution: Phân bổ khoảng trắng giữa và xung quanh các phần tử con.

Bố cục RTL

Bật checkbox Mirror for RTL để đảo ngược bố cục cho các hệ thống chữ viết từ phải sang trái. Thứ tự các phần tử trong container ngang sẽ bị lật.

Nền màn hình

Fill đặt nền màn hình thành màu đơn, gradient, hình ảnh, hoặc video. Nền lấp đầy toàn bộ viewport của thiết bị, kể cả vùng phía sau notch và thanh hệ thống — ngay cả khi Safe area đã được bật.

Lặp video nền

Bật toggle Loop để phát video nền theo vòng lặp liên tục.

Gán ID media tùy chỉnh

Cũng như bất kỳ hình ảnh hoặc video nào, bạn có thể gán cho nền màn hình một ID media tùy chỉnh để tham chiếu trong SDK của mình.

Khoảng cách màn hình

Điều chỉnh padding của màn hình cho từng cạnh (trên, phải, dưới, trái).

Cuộn

Kiểm soát hành vi tràn nội dung. Bật Vertical scroll để cho phép cuộn nội dung màn hình khi vượt quá chiều cao viewport.

Nhóm có thể chọn

Phần Selectable groups liệt kê tất cả các nhóm có thể chọn trên màn hình hiện tại — từ quiz, sản phẩm, tab, trial toggle, hoặc bất kỳ phần tử có thể chọn tùy chỉnh nào.

Nhấp vào một mục nhóm để đổi tên, thay đổi loại, xem các biến mà nhóm đó cung cấp, hoặc xóa nó.

Quản lý layer

Mỗi phần tử trên màn hình được biểu diễn dưới dạng một layer. Phần Layers hiển thị thứ tự các phần tử trên màn hình đang hoạt động.

Cấu trúc cây phản ánh mối quan hệ cha-con. Nhấp vào mũi tên trên bất kỳ layer cha nào để mở rộng hoặc thu gọn các layer con.

Bạn không thể tạo layer trực tiếp. Mọi phần tử bạn thêm qua giao diện Add element đều xuất hiện dưới dạng layer mới trong cây.

• Chọn layer: Nhấp vào một layer để chọn nó. Trình chỉnh sửa trực quan tô sáng phần tử tương ứng trên canvas, và bảng bên phải hiển thị thuộc tính thiết kế và tương tác của nó.
• Sắp xếp lại layer: Kéo và thả layer trong cây để thay đổi thứ tự của chúng trong container cha. Thứ tự trong cây khớp với thứ tự hiển thị trên màn hình.
• Hiển thị hoặc ẩn layer: Di chuột qua một layer để hiện biểu tượng mắt ở bên phải. Nhấp vào đó để bật/tắt hiển thị layer. Các layer ẩn vẫn còn trong cây nhưng không hiển thị trong trình chỉnh sửa trực quan hay trên thiết bị. Để kiểm soát hiển thị bằng logic lúc runtime, hãy dùng điều kiện hiển thị.
• Thu gọn tất cả layer: Nhấp vào nút thu gọn ở góc trên bên phải của phần Layers để gấp toàn bộ cây lại.

Thao tác với layer

Nhấp vào biểu tượng ba chấm để mở menu ngữ cảnh.

Thao tác	Phím tắt	Mô tả
Copy	⌘C / Ctrl+C	Sao chép layer vào clipboard
Paste here	⌘V / Ctrl+V	Dán một layer đã sao chép trước đó làm layer con
Duplicate	⌘D / Ctrl+D	Tạo bản sao của layer trong cùng container
Rename		Đổi tên hiển thị của layer. Mặc định, layer dùng nội dung hoặc loại thành phần làm tên
Delete	⌘⌫ / Ctrl+Del	Xóa layer và tất cả layer con của nó
Wrap		Bọc layer trong một container mới: Wrap in Horizontal Container hoặc Wrap in Vertical Container
Unwrap / Ungroup		Xóa container bọc ngoài và chuyển các layer con lên một cấp
Move up	↑	Di chuyển layer lên một vị trí trong container cha
Move down	↓	Di chuyển layer xuống một vị trí trong container cha