---
title: "向付费墙添加条件文本"
description: "使用条件文本根据用户选择的产品切换功能列表。"
---

此模板使用条件文本为不同方案突出显示不同的功能列表。界面上展示两个产品——例如 Pro 和 Pro+——用户选择不同产品时会显示对应的功能列表。其中一个产品被标记为默认选项，因此界面初次加载时会显示该产品对应的条件文本。
## 开始之前 \{#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-product-list\}

添加用户可以选择的产品，并将其中一个设为默认，这样页面在首次加载时就有一个有意义的初始状态。

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

添加和配置产品的步骤：
1. 点击 **+** > **Products**，选择一个布局预设。竖向列表适合这个模板。
2. 在画布上选中每个产品卡片，然后在 **Design** 标签页的下拉菜单中选择对应产品。
3. 选中你想默认选中的卡片（例如 Pro+），在 **Design** 标签页中启用 **Set as default product**。

## 5. 为第一个产品添加功能列表 \{#add-the-feature-list-for-the-first-product\}

第一个功能列表用于描述默认产品，仅在用户选中第一个产品时显示。

关于条件可见性的更多说明，请参阅[条件可见性](onboarding-element-visibility)。

按以下步骤添加并配置功能列表：
1. 点击 **+** > **List**，选择一个紧凑列表预设。Icon List 很适合用于付费墙。
2. 选中每一行后，在 **Content** 字段中编辑标题，描述第一个产品的功能特点。
3. 保持列表选中状态，打开 **Design** 标签页。在 **Visibility** 下，选择 **Conditional** Conditional。
4. 设置条件，使该列表仅在第一个产品被选中时显示。匹配 `products.selectedProduct.prod_title` 变量。对于 **Value**，点击变量图标 `{}`，选择第一个产品卡片，再选择其 `prod_title` 属性——比较结果将解析为该产品的标题。

## 6. 为第二个产品添加功能列表 \{#add-the-feature-list-for-the-second-product\}

对第二个产品重复相同的操作。这两个列表是互斥的——同一时间只有一个可见，具体显示哪个取决于当前选中的产品。

添加第二个功能列表的步骤：
1. 点击 **+** > **List**，选择相同的紧凑预设以保持视觉一致性。
2. 编辑每一行，填写第二个产品的功能描述。
3. 在 **Visibility** 下，选择 **Conditional** Conditional，设置与第 5 步相同的条件，但将 **Value** 变量选择器指向第二个产品卡片的 `prod_title`。

## 7. 添加购买按钮 \{#add-the-purchase-button\}

购买按钮会针对用户选择的产品发起应用内购买。按钮标签会显示所选产品的价格，因此当用户切换方案时，标签会随之更新。

关于"购买"动作的详细说明，请参阅[动作 — 购买](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`。

## 8. 添加页脚链接 \{#add-the-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)，开始向用户展示。