Một flow bao 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 quiz, hoặc một slide thông tin sản phẩm.

Các phần tử trên mỗi màn hình được tổ chức theo cấu trúc phân cấp lớp. Để quản lý màn hình, layer và các thành phần, hãy mở giao diện mặc định Screens and Layers. Tại đây bạn sẽ thấy 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ùng của bảng điều khiển bên trái liệt kê tất cả các màn hình trong flow. Mỗi mục hiển thị nhãn đánh số 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 sẽ hiển thị màn hình được chọn, và phần Layers bên dưới sẽ cập nhật để hiển thị cấu trúc phân lớp của nó.
• 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.
• Mở thư viện Template: Nhấp vào nút ở đầu phần Screens để duyệt và áp dụng các template 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.

Hành động 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.

Hành động	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à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 sắp xếp các phần tử con. Các thuộc tính này có thể dùng trên bất kỳ phần tử container nào.

• Free: Các phần tử con được định vị độc lập với nhau.

• 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. Đối 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í của phần tử theo trục phụ.

• Gap: Khoảng cách giữa các phần tử liền kề.

• Distribution: Phân bổ khoảng cách giữa và xung quanh các phần tử con.

Bố cục RTL

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

Nền màn hình

Fill đặt nền màn hình thành màu đơn sắc, gradient, hình ảnh hoặc video. Nền sẽ phủ toàn bộ vùng hiển thị của thiết bị, bao gồm cả khu vực phía sau notch và thanh hệ thống — ngay cả khi Safe area được bật.

Phát lặp video nền

Bật nút gạt Loop để phát video nền liên tục.

Gán ID media tùy chỉnh

Cũng giố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 custom media ID để 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, nút bật/tắt dùng thử, hoặc bất kỳ phần tử có thể chọn tùy chỉnh nào.

Nhấn 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 nhóm đó.

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ấn 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 thành phần được thêm qua giao diện Thêm thành phần sẽ tự động xuất hiện dưới dạng một layer mới trong cây.

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

Hành động trên layer

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

Action	Shortcut	Description
Copy	⌘C / Ctrl+C	Sao chép layer vào clipboard
Paste here	⌘V / Ctrl+V	Dán layer đã sao chép vào đây dưới dạng phần tử 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 sẽ lấy nội dung hoặc loại component làm tên
Delete	⌘⌫ / Ctrl+Del	Xóa layer và tất cả các phần tử 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		Gỡ bỏ container bọc ngoài và chuyển các phần tử 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