---
title: "在 Flow Builder 中添加和设置文字与列表样式"
description: "在 Adapty 的 Flow Builder 中添加和设置标题、副标题、段落及列表样式，为用户打造符合品牌调性的体验。"
---

只需单击即可添加标题、段落或列表，按品牌风格自定义样式，并使用[动态变量](onboarding-variables)为每位用户个性化内容。
## 设置文字样式 \{#set-up-text-styles\}

**Styles** 面板包含预配置的文字样式：H1、H2、H3、Button Label、Body、Caption 和 Small Label。点击任意样式即可编辑其字体系列、字重、字号、对齐方式、装饰效果及其他属性。

当你[添加文字元素](#add-text)时，可以从这里设置好的样式中选择一种。

:::important
对某个样式的修改会应用到所有使用该样式的文字元素，且对所有屏幕生效。
:::

创建新样式的步骤：

1. 点击 Palette 打开 **Styles** 面板。
2. 在 **Text** 标签页中，点击 **Create style**。

3. 输入名称并配置排版样式——字体系列、字重、对齐方式及[其他属性](#typography-properties)。

    :::warning
   [自定义字体](using-custom-fonts-in-flow-builder)与内置字体的行为有所不同。请阅读相关指南——部分控件不适用，且每种字体变体需要单独的文件。
   :::

   

4. 点击 **Create**。
## 添加文本 \{#add-text\}

添加文本元素的步骤：
1. 点击左上角的 **+**，选择 **Text**，然后从预设或自定义的[文本样式](#set-up-text-styles)中选择一种。

2. 点击新元素，在右侧 **Design** 面板的 **Content** 区域编辑其内容。
3. 如有需要，在 **Design** 面板中调整[排版属性](#typography-properties)。或者，在预览中选中文本，通过弹出的工具提示快速自定义样式。
4. 可选操作：在 **Design** 和 **Interaction** 面板中，你还可以为流程中的组件应用其他可用配置。详情请参阅[样式与外观](builder-styling)。
:::tip
如果需要在多个屏幕上使用同一个文本元素，可以复制粘贴：选中该元素，按 Ctrl+C（Mac 上按 ⌘+C），切换到另一个屏幕，再按 Ctrl+V（Mac 上按 ⌘+V）粘贴。
:::

### 更改部分文本的样式 \{#change-styling-for-parts-of-text\}

:::warning
**粗体**和**斜体**格式对使用[自定义字体](using-custom-fonts-in-flow-builder)的文本无效。如需应用自定义字体的变体，请将每个变体作为单独的字体文件上传，并从 **Font family** 下拉菜单中选择。
:::

如需仅更改文本元素中某些部分的样式：

1. 在 **Content** 部分选中文本元素的某一部分。
2. 在弹出的工具提示中，更改文本颜色、应用粗体、下划线、斜体或删除线格式，或添加 URL。

预览会立即更新。

## 添加旧价格 \{#add-an-old-price\}

旧价格元素会在产品实际价格旁显示一个虚高的"原价"，让折扣一目了然。它会将产品价格乘以你设定的倍数，并自动添加删除线效果。

该元素的内容无需手动编辑。其数值在运行时根据产品的商店价格动态计算，因此货币单位始终与实际价格保持一致。

添加旧价格的步骤：

1. 点击左上角的 **+**，选择 **Text**，然后选择 **Old Price**。

2. 在 **Layers** 面板中，将元素拖入产品卡片内。该元素同样适用于已保存为可复用组件的产品卡片。

   :::important
   Old Price 元素必须放在产品卡片内——价格取自该卡片对应的产品。若放在产品卡片之外，编辑工具将显示"Old price"占位符，而非实际价格。
   :::
3. 在 **Design** 面板的 **Price** 区域中，设置 **Multiplier**。Adapty 会将产品价格乘以该值。例如，默认倍数为 2 时，售价 $12.99 的产品会显示划掉的 $25.98。

   

4. 如需调整，请设置[排版属性](#typography-properties)。该元素支持与普通文本相同的样式。

:::tip
如需划掉另一个产品的实际价格——例如在年度订阅卡片上显示月度计划的价格——请改用文本元素和变量来构建价格行。详见[显示带折扣徽章的划掉价格](strikethrough-price)。
:::
## 字体属性 \{#typography-properties\}

每个文本元素和文本样式都共享同一套字体控制选项：

- **Font family**：选择字体——内置字体或[自定义字体](using-custom-fonts-in-flow-builder)。

    :::warning
    不同设备预装的字体各不相同，同一字体在不同设备上的渲染效果也可能有差异。如果设备上没有所选字体，系统将使用默认字体（SF Pro / Roboto）。若要在所有设备上统一显示同一字体，请上传[自定义字体](using-custom-fonts-in-flow-builder)。
    :::

- **Weight**：设置字体粗细。
:::warning
**Weight**、**Bold** 和 **Italic** 控件不适用于[自定义字体](using-custom-fonts-in-flow-builder)，无论是在 **Styles** 面板、**Design** 面板的排版部分、内联工具栏还是文本格式提示框中设置均如此。如需应用自定义字体的变体，请将每个变体作为单独的字体文件上传，然后从 **Font** 下拉菜单中选择对应的字体。
:::
- **Size**：设置字体大小（以像素为单位）。
- **Color**：设置文字颜色。
- **Line height**：设置行间距，或保持 **Auto**。
- **Alignment**：设置水平对齐（左对齐、居中、右对齐）和垂直对齐（顶部、居中、底部）。
- **Decoration**：添加下划线或删除线。
- **Truncate**：限制显示的行数，超出部分将被截断。当内容因动态变量或本地化而长度不一时，此功能非常实用。
## 添加链接 \{#add-links\}

流程支持两种将文本转为可点击链接的方式，根据文本的用途选择即可：

- **内联链接** — 适用于正文中嵌入的 URL，例如段落中的"了解更多"引用。始终在应用内浏览器中打开。
- **Open URL 操作** — 适用于独立的点击目标，例如服务条款按钮。可在应用内浏览器或外部浏览器中打开。
### 内联链接 \{#inline-link\}

将文本元素的部分内容转换为链接：

1. 在 **Content** 区域中选中文本。
2. 在格式化工具提示中，点击链接图标。
3. 将目标 URL 粘贴到弹出框中。

### 打开 URL 操作 \{#open-url-action\}

:::link
主要文章：[操作](onboarding-actions#open-url)
:::

要将整个按钮变成链接：

1. 添加一个 [Button](builder-elements#buttons)，或使用 **Links** 预设——这是一个包含 Restore / Terms of Service / Privacy Policy 按钮的现成行。

    

2. 在 **Layers** 面板中选中该按钮，然后在右侧面板中打开 **Interactions** 标签页。

3. 设置 [**Open URL**](onboarding-actions#open-url) 动作的目标地址。

    :::important
    空的 Open URL 动作会[阻止预览和发布](builder-save-publish#troubleshooting)。
    :::

    
## 添加条件文本 \{#add-conditional-text\}

条件文本会根据条件改变文本元素的显示内容。例如，当用户选择年度套餐时，标题可以显示一条消息；选择月度套餐时，则显示另一条消息。条件文本的工作方式类似于[条件可见性](onboarding-element-visibility)，但它会替换内容，而不是显示或隐藏元素。

设置条件文本的步骤：

1. 在画布上选择一个文本元素。
2. 在 **Design** 面板的 **Content** 部分，选择 **Conditional**。

3. 构建 **if** 条件。从 **Custom**、**Products** 或 **Elements** 标签页中选择属性，设置运算符，并输入要匹配的值。有关属性类型的详细信息，请参阅[条件可见性](onboarding-element-visibility)。
4. 在 **then** 下，输入条件为真时显示的文本。富文本格式的使用方式与[普通文本](#change-styling-for-parts-of-text)相同。如需插入[变量](onboarding-variables)，点击 **{ } Add variable**。
5. 在 **else** 下，输入当没有条件匹配时显示的备用文本。
6. （可选）点击 **+ Add else/if** 添加更多条件，每个条件对应各自的文本。
:::tip
要编辑其他语言的条件文本，请在编辑器底部切换当前语言环境。请先在 **Localizations** 面板中添加语言——详见[在 Flow Builder 中添加语言环境](add-paywall-locale-in-adapty-paywall-builder)。
:::

## 添加列表 \{#add-lists\}

:::note
列表元素是由各个条目组件组成的容器。如果只需要在正文中添加简单的项目符号列表或编号列表，请使用文本元素，并通过 **Design** 面板设置所需格式。
:::

1. 点击左上角的 **+**，选择 **List**，然后选择一个列表模板。

2. 在右侧的 **Design** 面板中编辑列表条目，或上传图片作为条目标记。