---
title: Màn hình và layer
description: "Quản lý màn hình và phân cấp phần tử trong từng màn hình trong Flow Builder."
---

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 \{#manage-screens\}

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 Plus ở đầ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.

:::important
Nếu flow của bạn có các màn hình trống chưa sử dụng, bạn sẽ không thể xuất bản. Hãy xóa tất cả màn hình nháp trước khi xuất bản.
:::

### Thao tác với màn hình \{#screen-actions\}

Nhấp vào biểu tượng ba chấm Context 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 |

:::warning
Khi bạn xóa một màn hình, bất kỳ hành động [Navigate to Screen](onboarding-navigation-branching) nào trỏ đến màn hình đó sẽ **mất đích đến**, nhưng bản thân hành động đó **không bị xóa**. Hãy gán đích đến mới hoặc xóa hành động — nếu không, bạn sẽ không thể [xem trước hoặc xuất bản flow](builder-save-publish#publish-a-flow).
:::

## Điều hướng giữa các màn hình \{#navigate-between-screens\}

:::link
Bài viết chính: [Điều hướng và tương tác](onboarding-navigation-branching)
:::

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 \{#screen-settings\}

Để 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 \{#system-ui\}

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 \{#include-screen-in-progress-indicator\}

Nếu bạn thêm phần tử [Progress Indicator](builder-loaders-and-progress-bars#progress-indicators) 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 \{#screen-layout\}

:::link
Bài đầy đủ: [Vị trí phần tử](manage-paywall-ui-elements)
:::

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 \{#rtl-layout\}

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 \{#screen-background\}

:::link
Bài viết chính: [Nền](paywall-head-picture)
:::

**Fill** đặt [nền màn hình](paywall-head-picture) 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 \{#loop-background-video\}

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 \{#assign-a-custom-media-id\}

Cũng như [bất kỳ hình ảnh hoặc video nào](custom-media), 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 \{#screen-spacing\}

Đ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 \{#scroll\}

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 \{#selectable-groups\}

:::link
Bài viết chính: [Phần tử và nhóm có thể chọn](flow-selectable-elements)
:::

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](onboarding-quizzes), [sản phẩm](paywall-product-block), [tab](builder-tabs), [trial toggle](builder-toggles), hoặc bất kỳ [phần tử có thể chọn tùy chỉnh](flow-selectable-elements#make-an-element-selectable) 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 \{#manage-layers\}

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.

:::important
Các layer trong Flow không chồng lên nhau như layer trong phần mềm thiết kế đồ họa. Thay vào đó, chúng đại diện cho các thành phần riêng lẻ của màn hình. Các phần tử chỉ chồng lên nhau *khi* chúng sử dụng [định vị tuyệt đối hoặc cố định](manage-paywall-ui-elements). Thứ tự xếp chồng được xác định bởi thuộc tính `z-index`, không phải vị trí của chúng trong cây layer.
:::

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](builder-elements) đề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ế](builder-styling) và [tương tác](onboarding-navigation-branching) 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 Eye ở 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ị](onboarding-element-visibility).
* **Thu gọn tất cả layer**: Nhấp vào nút thu gọn Collapse ở 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 \{#layer-actions\}

Nhấp vào biểu tượng ba chấm Context để 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 |