此模板通过条件显示来突出展示不同方案对应的功能列表。屏幕上显示两个产品（例如 Pro 和 Pro+），用户选择不同产品时，对应的功能列表会随之切换。其中一个产品被设为默认选中，因此屏幕初始加载时会显示该产品的功能列表。

开始之前

• 在 Adapty 看板中创建产品。
• 将 Adapty 连接到 App Store 和 Google Play。

1. 设置屏幕布局

屏幕是所有内容的容器。在本示例中，背景使用的是图片，但纯色或渐变效果的设置方式完全相同。

有关屏幕属性的完整列表，请参阅屏幕与图层 — 屏幕设置。

配置屏幕的步骤如下：

1. 点击画布空白区域以选中屏幕。
2. 在 System UI 下，禁用 Safe area，使背景延伸到屏幕边缘。
3. 在 Fill 下，选择背景类型并进行配置。本示例使用 Image ，纯色或渐变的配置方式相同。
4. 在 Layout 下，将方向设置为 Vertical ，并配置间距和对齐方式，使元素从顶部向下排列，内容填充剩余空间。

2. 添加关闭按钮

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

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

3. 添加标题并与关闭按钮配对

标题位于屏幕顶部，与关闭按钮并排显示。要让它们水平对齐，需要将两者放入一个水平容器中。

添加标题的步骤：

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

将标题与关闭按钮组合在一起：

1. 在 Layers 面板中，点击关闭按钮图层的三点菜单 ，选择 Wrap > Wrap in Horizontal Container。

2. 将 H1 图层拖入新建的水平容器中。

对齐两个元素：

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

4. 添加产品列表

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

关于产品管理的更多内容，请参阅设置购买。

添加和配置产品的步骤：

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

5. 为第一个产品添加功能列表

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

更多关于条件可见性的内容，请参阅条件可见性。

按照以下步骤添加并配置功能列表：

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

6. 为第二个产品添加功能列表

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

添加第二个功能列表的步骤：

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

7. 添加购买按钮

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

关于”购买”动作的详细说明，请参阅动作 — 购买。

添加并配置购买按钮的步骤如下：

1. 点击 + > Buttons，选择一个按钮预设。
2. 选中按钮后，打开 Design 标签页，将光标定位到 Content 字段。点击变量图标 ，选择 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. 添加页脚链接

使用条款、隐私政策和恢复购买按钮位于主要内容下方。

添加页脚链接的步骤：

1. 点击 + > Buttons > Links。这会在图层树末尾添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy。
2. 在 Layers 面板中，选择 Terms of Use 按钮。打开 Interactions 标签页，将您的条款 URL 粘贴到 Open URL 字段中。
3. 对 Privacy Policy 按钮重复上述步骤，填入您的隐私政策 URL。
4. 保留 Restore Purchases 链接不变，其操作已预先配置好。

后续步骤

• 保存并发布你的流程。
• 将流程添加到版位，开始向用户展示。