---
title: "Flow 编辑工具中的按钮"
description: "在 Flow 编辑工具中添加和配置操作按钮。"
---

:::info
本节介绍新版 Flow 编辑工具，该工具需配合 Adapty SDK 4.0 或更高版本使用。
:::
按钮是流程编辑工具中响应用户点击的交互元素。适用场景包括：
- 购买 CTA，与产品关联并自动处理交易
- 导航——在页面之间跳转（下一步、返回、关闭、跳过）
- 实用链接——恢复购买、服务条款和隐私政策

:::tip
将购买 CTA、恢复链接和法律链接放置在 [Footer](builder-containers#footer) 中——它固定在屏幕底部，并遮挡下方滚动的元素。
:::
## 添加按钮 \{#add-buttons\}

添加任意按钮的步骤：

1. 点击 **+** 并选择 **Button**。
2. 选择按钮类型。

    <img src="/assets/shared/img/button-type.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

3. 购买按钮、链接和关闭按钮均已预配置操作。对于链接，[配置用于导航用户的 URL](#links)。对于其他按钮类型，请前往 **Interactions** 面板。在 **Button triggers** 部分，设置按钮需要执行的[操作](onboarding-actions)。

    <img src="/assets/shared/img/button-action.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '700px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

4. 在 **Design** 面板中配置[按钮设计](builder-styling)。
## 按钮类型 \{#button-types\}
### 购买按钮 \{#purchase-buttons\}

:::link
若要让购买按钮正常工作，请将产品绑定到屏幕并添加 **Products** 元素。请参阅[指南](paywall-product-block)。
:::

购买按钮会触发用户在屏幕上选中产品的应用内购买流程。SDK 会自动处理交易，因此无需在应用代码中手动处理购买逻辑。

添加购买按钮的步骤：
1. 点击 **+** 并选择 **Button**，然后选择一个按钮预设。
2. 选中按钮后，在右侧面板中打开 **Interactions** 标签页。
3. 点击 **Add trigger** > **On tap**，然后点击 **Add action**。
4. 将 **Action** 设置为 **Purchase**，将 **Product** 设置为 `products.selectedProduct`。`products.selectedProduct` 变量始终解析为当前屏幕上已选中的产品。

:::tip
你可以通过添加动画效果让购买按钮更加醒目。付费墙编辑工具目前支持 **Pulse** 动画类型。
在 **Design** 面板中配置动画样式。
:::

  <img src="/assets/shared/img/purchase-button.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### 链接 \{#links\}

:::important
**Terms of Use** 和 **Privacy Policy** 按钮内置了 **Open URL** 操作。请在该操作中设置目标 URL。空的 Open URL 以及[内联链接](onboarding-text#inline-link)会阻止预览和发布。
:::

为满足部分应用商店的要求，您可以添加以下链接：
- 服务条款
- 隐私政策
- 购买恢复
添加链接的方法：
1. 点击 **+**，选择 **Button > Links**。这会添加一行内联按钮，包含预设操作：恢复购买或打开 URL。如果不需要其中某些按钮，可在图层面板中删除多余的按钮。

    <img src="/assets/shared/img/add-links.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

2. 接下来，设置按钮操作：

   - **Restore purchases** 按钮已自动处理购买恢复功能。
   - 对于其余每个链接：
        1. 点击按钮将其选中，然后切换到右侧的 **Interactions** 标签页。
        2. 将 URL 粘贴到输入框中。
        3. 默认情况下，URL 会在应用内浏览器中打开，以提供流畅的用户体验。如果希望在外部浏览器中打开，请勾选 **Open in external browser** 复选框。

  <img src="/assets/shared/img/pb-links.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### 关闭流程 \{#close-flow\}

**关闭** 按钮可自动关闭流程。

要添加关闭按钮，点击 **+** 并选择 **Button > Close flow**。

    <img src="/assets/shared/img/close-flow.webp"
         style={{
             border: '1px solid #727272', /* border width and color */
             width: '500px', /* image width */
             display: 'block', /* for alignment */
             margin: '0 auto' /* center alignment */
         }}
    />

:::tip
使用 **Absolute** 定位将关闭按钮放置在屏幕角落。
:::
您也可以通过[操作](onboarding-actions)将任意其他按钮配置为关闭流程。
### 自定义按钮 \{#custom-buttons\}

你添加的每个按钮都可以配置点击后执行的操作：
- 跳转到下一个页面
- 显示弹窗提示
- 设置[变量](onboarding-variables)
- [显示或隐藏页面元素](onboarding-element-visibility)
- 打开 URL
- 恢复购买
- 执行条件操作