创建带标签页的付费墙
此模板使用标签页在单个界面上切换同一优惠的两种变体。每个标签页都包含独立的功能列表、产品列表和购买按钮。点击标签页即可切换显示内容，无需离开当前界面——适用于按层级、计费周期或目标受众细分来展示不同套餐。
开始之前
- 在 Adapty 看板中创建产品。
- 将 Adapty 连接到 App Store 和 Google Play。
1. 设置屏幕布局
屏幕作为关闭按钮、标题、标签页及标签页内容的容器。本示例中背景使用的是图片，纯色或渐变效果的配置方式相同。
有关屏幕属性的完整列表，请参阅屏幕与图层 — 屏幕设置。
要配置屏幕：
- 点击画布空白区域以选中屏幕。
- 在 System UI 下，关闭 Safe area，使背景延伸至屏幕边缘。
- 在 Fill 下，选择背景类型并进行配置。此示例使用 Image
Image，但纯色或渐变效果的设置方式相同。 - 在 Layout 下，将方向设置为 Vertical
Vertical，并配置间距和对齐方式，使元素从顶部依次排列，标签页内容填满剩余空间。
2. 添加关闭按钮
关闭按钮用于关闭付费墙。Close 预设已预先配置好，无需设置任何操作。
- 在画布上，点击 +。
- 选择 Buttons > Close。
3. 添加标题并与关闭按钮配对
标题位于屏幕顶部，紧邻关闭按钮。要将两者水平对齐，需要将它们放入一个水平堆叠容器中。
添加标题的步骤：
- 点击 + > Text > H1。
- 选中 H1 后，打开 Design 选项卡，在 Content 字段中编辑文本内容。
将标题与关闭按钮编组：
- 在 Layers 面板中，点击关闭按钮图层上的三点菜单
Context menu，然后选择 Wrap > Wrap in Horizontal Stack。
- 将 H1 图层拖入新建的水平堆叠中。
对齐两个元素：
- 调整关闭按钮大小和 H1 字体大小，使它们在同一行中排列得当。
- 选中水平堆叠后，在右侧面板中设置对齐和分布方式，使元素正确排列。
4. 添加标签页并配置其标签
Tabs 元素将页面区域拆分为可切换的内容面板。每个标签页都有独立的内容容器，用户选中该标签页时即可显示对应内容。
有关 Tabs 元素的详细介绍，请参阅元素 — Tabs。有关可选择组的详细介绍，请参阅可选择元素与组。
添加标签页的步骤如下：
- 点击 + > Tabs，选择一个预设样式——Segment control、Button Tabs 或 Underline。
- 在画布或 Layers 面板中选中每个标签页的名称，在 Design 标签的 Content 字段中编辑标签文本——例如
Premium和Pro。
5. 在第一个标签页中添加功能列表
在第一个标签页中添加简洁的功能列表，让用户清楚了解该方案包含的内容。
完整的列表预设内容，请参阅元素 — 列表。
添加功能列表的步骤：
- 点击 + > List，选择一个列表预设。Icon List 是付费墙中最紧凑的样式。该元素会出现在图层树的末尾。
- 选中每一行后，在 Content 字段中编辑标题文本。
- 在Layers面板中，将列表拖入第一个标签页的Content容器内。
6. 在第一个标签页添加产品列表
产品列表展示第一个标签页的订阅选项。Products 元素会为分配给该页面的每个产品渲染一张卡片，并创建自己的可选组。
更多产品管理内容，请参阅设置购买。
添加并配置产品的步骤如下：
- 点击 + > Products，选择一个布局预设。Vertical List 适合堆叠式方案展示。该元素会出现在图层树的末尾。
- 在画布上选中每张产品卡片，然后在 Design 标签页的下拉菜单中选择对应的产品。
- 在 Layers 面板中，将 Products 图层拖入第一个标签页的 Content 容器。
7. 在第一个标签页中添加购买按钮
购买按钮会为用户在第一个标签页中选择的产品发起应用内购买。按钮标签显示所选产品的价格，因此始终与用户的选择保持同步。
有关购买操作的详细信息，请参阅操作 — 购买。
添加并配置购买按钮的步骤：
- 点击 + > Buttons，选择一个按钮预设。该元素会出现在图层树的末尾。
- 选中按钮后，打开 Design 标签页，将光标放置在 Content 字段中。点击变量图标
，选择 products.selectedProduct，再选择prod_price属性——完整变量解析为products.selectedProduct.prod_price。在变量周围补充标签文字，例如Subscribe for {prod_price}。
- 切换到 Interactions 标签页，点击 Add trigger > On tap > Add action。
- 将 Action 设置为 Purchase，将 Product 设置为
products.selectedProduct。
- 在 Layers 面板中，将按钮拖入第一个标签页的 Content 容器内。
8. 将第一个标签页的内容复制到第二个标签页
无需从头重建相同的结构，只需将第一个标签页中的功能列表、产品列表和购买按钮复制到第二个标签页，之后只更新相应的值即可。
复制内容的方法：
- 在 Layers 面板中，展开第一个选项卡的 Content 容器。
- 选中其中的每个元素（功能列表、产品、购买按钮），按 ⌘C / Ctrl+C 复制，再按 ⌘V / Ctrl+V 粘贴。复制的元素会出现在图层树的末尾。
- 将每个复制的元素拖入第二个选项卡的 Content 容器中。
9. 更新第二个标签页的内容
第二个标签页目前与第一个完全相同。逐一修改其中的元素，使其反映第二个方案的内容。
更新第二个标签页的步骤：
- 编辑第二个标签页中功能列表的内容，使各行与第二个方案的功能对应。
- 在第二个标签页的 Products 元素中选中每个产品卡片，从下拉列表中为其分配第二个方案的产品。此 Products 元素会自动成为一个独立的可选组（
products2）。 - 选中第二个标签页中的购买按钮。在 Design 标签页的 Content 字段中，将价格变量从
products.selectedProduct.prod_price改为products2.selectedProduct.prod_price。 - 切换到 Interactions 标签页，将 Purchase 操作的 Product 从
products.selectedProduct更新为products2.selectedProduct。
10. 添加共享底部链接
无论当前激活的是哪个标签页，服务条款、隐私政策和恢复购买链接都应始终可见。将它们添加在屏幕层级——位于两个标签页内容容器之外——这样两个标签页可以共用这些链接。
添加底部链接的步骤：
- 点击 + > Buttons > Links。这会在图层树末尾添加一行，包含 Restore Purchases、Terms of Use 和 Privacy Policy，这正是你想要的位置——在屏幕根层级，而不是嵌套在标签页内。
- 选中 Terms of Use 链接，打开 Interactions 标签页，将你的条款 URL 粘贴到 Open URL 字段中。
- 对 Privacy Policy 链接重复上述操作，填入你的隐私政策 URL。
- Restore Purchases 链接保持不变，其操作已预先配置好。
