---
title: "使用试用切换开关构建付费墙"
description: "在包含免费试用和不包含免费试用的产品之间切换付费墙，并让选中的产品与切换开关保持同步。"
---

> **AI agents**: to search Adapty docs faster and with fewer tokens, install the Adapty skill. Claude Code (self-updating via plugin): `claude plugin marketplace add adaptyteam/adapty-skills && claude plugin install adapty-skills@adapty` — other tools: `npx skills add adaptyteam/adapty-skills --all`

试用切换开关允许你在带有免费试用的产品和不带免费试用的产品之间切换付费墙。但切换开关本身只是一个开/关的控件。你需要编写规则来显示正确的卡片，以及更改所选产品的规则。

This recipe shows you how to set these rules and build a fully working toggle-enabled paywall.

<DocVideo id="paywall-trial-toggle-demo.mp4" width="300px" alt="The finished paywall: flipping the trial toggle swaps both product cards to their trial versions and changes the button label from Purchase to Start your free trial" />

## 开始之前 \{#before-you-start\}

- 构建付费墙界面——例如，参考[创建基础付费墙界面](basic-paywall-screen)教程。
- [创建产品](create-product)并[为其添加试用优惠](create-offer)。

:::important
如果你希望将试用设置为可选项（这是使用试用开关的必要条件），请勿创建新用户优惠。在 iOS 上，新用户优惠会**自动**应用于所有符合条件的用户，无法关闭。请改用促销活动。详见[Adapty 如何处理优惠](create-offer#how-adapty-works-with-offers)。
:::

## 1. 添加产品卡片 \{#1-add-the-product-cards\}

1. 点击添加元素菜单 **+** > **Paywall & Commerce** > **Products**，选择一个预设。
2. 在画布或 **Layers** 面板中选择一张卡片，为其分配产品，并将 **Select offer (optional)** 留空。
3. 为每个套餐重复上述步骤——每个套餐对应一张卡片，不含试用。
4. 复制每张卡片，在副本上从 **Select offer (optional)** 中选择试用优惠。

这样每个套餐就有了两张指向同一产品的卡片——一张带优惠，一张不带。

## 2. 添加试用开关 \{#2-add-the-trial-toggle\}

1. 点击 **+** > **Paywall & Commerce** > **Trial Toggle**。

2. 确保开关属于正确类型的可选组。点击画布空白区域以打开 **Screen settings**。在 **Selectable groups** 下，打开 `trial_toggle`，将 **Group Type** 设置为 **Toggle**，然后点击 **Save**。对话框会显示我们将用于检测开关是否开启的变量：`trial_toggle.isActive`。

3. 编辑切换按钮的标签。

默认将切换按钮保持关闭状态。预先选中的试用切换按钮可能因被认定为暗模式而遭到 App Store 拒审——详见[切换按钮](builder-toggles)。

## 3. 根据切换状态显示对应卡片 \{#show-the-right-cards-for-each-toggle-state\}

在每张卡片的 **Design** 选项卡中，找到 **Visibility** 设置，选择 **Conditional** 并配置其条件：

| 卡片 | 条件 |
|---|---|
| 含试用期 | `trial_toggle.isActive` **Equals** **True** |
| 不含试用期 | `trial_toggle.isActive` **Equals** **False** |

## 4. 切换开关变化时选中可见卡片 \{#select-a-visible-card-when-the-toggle-changes\}

目前卡片会随开关切换而变化，但选中的产品不会。变为不可见的卡片仍然保持选中状态，**Purchase** 操作仍然指向它——因此，启用试用的用户可能仍会被扣费。

为开关添加一个**条件操作**，使其在每次点击时将选中项重置为可见卡片。

1. 在 **Layers** 面板中，选择 **Trial toggle** 容器。
2. 打开 **Interactions** 标签，添加 **On tap** 触发器，以及一个**条件操作**：

   | Block | What to configure |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | **Select Product**, pointing at a card with the trial |
    | **else** | **Select Product**, pointing at the same product without the trial |

## 5. 更新按钮标签 \{#update-the-button-label\}

试用开启后，行动号召文案应随之改变。

1. 选中按钮的文本元素。
2. 在 **Design** 标签页的 **Content** 下，选择 **Conditional** 并点击 **Edit conditions**。
3. 填写以下内容：

    | 区块 | 配置说明 |
    |---|---|
    | **if** | `trial_toggle.isActive` **Equals** **True** |
    | **then** | 试用标签，例如 `Start your free trial` |
    | **else** | 标准标签，例如 `Purchase` |

有关条件文本的更多信息，请参阅[添加条件文本](onboarding-text#add-conditional-text)。