---
title: "创建带标签页的付费墙"
description: "构建一个带有两个标签页的付费墙界面，可在不同功能列表、产品组和购买操作之间切换。"
---

此模板使用标签页在单个界面上切换同一优惠的两种变体。每个标签页都包含独立的功能列表、产品列表和购买按钮。点击标签页即可切换显示内容，无需离开当前界面——适用于按层级、计费周期或目标受众细分来展示不同套餐。
## 开始之前 \{#before-you-start\}

- 在 Adapty 看板中[创建产品](create-product)。
- [将 Adapty 连接到 App Store 和 Google Play](integrate-payments)。
## 1. 设置屏幕布局 \{#1-set-up-the-screen-layout\}

屏幕作为关闭按钮、标题、标签页及标签页内容的容器。本示例中背景使用的是图片，纯色或渐变效果的配置方式相同。

有关屏幕属性的完整列表，请参阅[屏幕与图层 — 屏幕设置](paywall-layout-and-products#screen-settings)。

要配置屏幕：
1. 点击画布空白区域以选中屏幕。
2. 在 **System UI** 下，关闭 **Safe area**，使背景延伸至屏幕边缘。
3. 在 **Fill** 下，选择背景类型并进行配置。此示例使用 **Image** Image，但纯色或渐变效果的设置方式相同。
4. 在 **Layout** 下，将方向设置为 **Vertical** Vertical，并配置间距和对齐方式，使元素从顶部依次排列，标签页内容填满剩余空间。

## 2. 添加关闭按钮 \{#2-add-the-close-button\}

关闭按钮用于关闭付费墙。**Close** 预设已预先配置好，无需设置任何操作。

1. 在画布上，点击 **+**。
2. 选择 **Buttons** > **Close**。

## 3. 添加标题并与关闭按钮配对 \{#add-the-title-and-pair-it-with-the-close-button\}

标题位于屏幕顶部，紧邻关闭按钮。要将两者水平对齐，需要将它们放入一个水平堆叠容器中。

添加标题的步骤：

1. 点击 **+** > **Text** > **H1**。
2. 选中 H1 后，打开 **Design** 选项卡，在 **Content** 字段中编辑文本内容。

将标题与关闭按钮编组：
1. 在 **Layers** 面板中，点击关闭按钮图层上的三点菜单 Context menu，然后选择 **Wrap** > **Wrap in Horizontal Stack**。

2. 将 H1 图层拖入新建的水平堆叠中。

对齐两个元素：
1. 调整关闭按钮大小和 H1 字体大小，使它们在同一行中排列得当。
2. 选中水平堆叠后，在右侧面板中设置对齐和分布方式，使元素正确排列。

## 4. 添加标签页并配置其标签 \{#add-the-tabs-and-configure-their-labels\}

Tabs 元素将页面区域拆分为可切换的内容面板。每个标签页都有独立的内容容器，用户选中该标签页时即可显示对应内容。

有关 Tabs 元素的详细介绍，请参阅[元素 — Tabs](builder-elements#tabs)。有关可选择组的详细介绍，请参阅[可选择元素与组](flow-selectable-elements)。

添加标签页的步骤如下：
1. 点击 **+** > **Tabs**，选择一个预设样式——Segment control、Button Tabs 或 Underline。
2. 在画布或 **Layers** 面板中选中每个标签页的名称，在 **Design** 标签的 **Content** 字段中编辑标签文本——例如 `Premium` 和 `Pro`。

## 5. 在第一个标签页中添加功能列表 \{#add-a-feature-list-to-the-first-tab\}

在第一个标签页中添加简洁的功能列表，让用户清楚了解该方案包含的内容。

完整的列表预设内容，请参阅[元素 — 列表](builder-elements#list)。

添加功能列表的步骤：

1. 点击 **+** > **List**，选择一个列表预设。Icon List 是付费墙中最紧凑的样式。该元素会出现在图层树的末尾。
2. 选中每一行后，在 **Content** 字段中编辑标题文本。

3. 在**Layers**面板中，将列表拖入第一个标签页的**Content**容器内。

## 6. 在第一个标签页添加产品列表 \{#add-the-product-list-to-the-first-tab\}

产品列表展示第一个标签页的订阅选项。Products 元素会为分配给该页面的每个产品渲染一张卡片，并创建自己的可选组。

更多产品管理内容，请参阅[设置购买](paywall-product-block)。

添加并配置产品的步骤如下：

1. 点击 **+** > **Products**，选择一个布局预设。Vertical List 适合堆叠式方案展示。该元素会出现在图层树的末尾。
2. 在画布上选中每张产品卡片，然后在 **Design** 标签页的下拉菜单中选择对应的产品。

3. 在 **Layers** 面板中，将 Products 图层拖入第一个标签页的 **Content** 容器。

## 7. 在第一个标签页中添加购买按钮 \{#add-the-purchase-button-to-the-first-tab\}

购买按钮会为用户在第一个标签页中选择的产品发起应用内购买。按钮标签显示所选产品的价格，因此始终与用户的选择保持同步。

有关购买操作的详细信息，请参阅[操作 — 购买](onboarding-actions#purchase)。

添加并配置购买按钮的步骤：
1. 点击 **+** > **Buttons**，选择一个按钮预设。该元素会出现在图层树的末尾。
2. 选中按钮后，打开 **Design** 标签页，将光标放置在 **Content** 字段中。点击变量图标 Variable icon，选择 `products.selectedProduct`，再选择 `prod_price` 属性——完整变量解析为 `products.selectedProduct.prod_price`。在变量周围补充标签文字，例如 `Subscribe for {prod_price}`。

3. 切换到 **Interactions** 标签页，点击 **Add trigger** > **On tap** > **Add action**。
4. 将 **Action** 设置为 **Purchase**，将 **Product** 设置为 `products.selectedProduct`。

5. 在 **Layers** 面板中，将按钮拖入第一个标签页的 **Content** 容器内。

## 8. 将第一个标签页的内容复制到第二个标签页 \{#copy-the-first-tabs-content-into-the-second-tab\}

无需从头重建相同的结构，只需将第一个标签页中的功能列表、产品列表和购买按钮复制到第二个标签页，之后只更新相应的值即可。

复制内容的方法：
1. 在 **Layers** 面板中，展开第一个选项卡的 **Content** 容器。
2. 选中其中的每个元素（功能列表、产品、购买按钮），按 ⌘C / Ctrl+C 复制，再按 ⌘V / Ctrl+V 粘贴。复制的元素会出现在图层树的末尾。
3. 将每个复制的元素拖入第二个选项卡的 **Content** 容器中。

## 9. 更新第二个标签页的内容 \{#update-the-second-tabs-content\}

第二个标签页目前与第一个完全相同。逐一修改其中的元素，使其反映第二个方案的内容。

更新第二个标签页的步骤：
1. 编辑第二个标签页中功能列表的内容，使各行与第二个方案的功能对应。
2. 在第二个标签页的 Products 元素中选中每个产品卡片，从下拉列表中为其分配第二个方案的产品。此 Products 元素会自动成为一个独立的可选组（`products2`）。
3. 选中第二个标签页中的购买按钮。在 **Design** 标签页的 **Content** 字段中，将价格变量从 `products.selectedProduct.prod_price` 改为 `products2.selectedProduct.prod_price`。
4. 切换到 **Interactions** 标签页，将 **Purchase** 操作的 **Product** 从 `products.selectedProduct` 更新为 `products2.selectedProduct`。

## 10. 添加共享底部链接 \{#add-the-shared-footer-links\}

无论当前激活的是哪个标签页，服务条款、隐私政策和恢复购买链接都应始终可见。将它们添加在屏幕层级——位于两个标签页内容容器之外——这样两个标签页可以共用这些链接。

添加底部链接的步骤：
1. 点击 **+** > **Buttons** > **Links**。这会在图层树末尾添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy，这正是你想要的位置——在屏幕根层级，而不是嵌套在标签页内。
2. 选中 **Terms of Use** 链接，打开 **Interactions** 标签页，将你的条款 URL 粘贴到 **Open URL** 字段中。
3. 对 **Privacy Policy** 链接重复上述操作，填入你的隐私政策 URL。
4. **Restore Purchases** 链接保持不变，其操作已预先配置好。

## 后续步骤 \{#next-steps\}

- [保存并发布您的流程](builder-save-publish)。
- [将流程添加到版位](create-placement)，开始向用户展示。