要打开元素库并向屏幕添加新元素，请点击左侧面板或设备预览上方的加号按钮 。 元素分为以下几类：

• 基础元素（布局容器、文本、媒体、列表、徽章、复选标记）
• 表单与测验（按钮、输入框、测验、标签页）
• 付费墙与商业（产品、试用切换、用户互动、倒计时）
• 进度指示器与加载动画

对于每个元素，Adapty 都提供多种预设——包含占位内容或预定义交互的模板。

基础知识

布局

布局元素是用于组织内部子元素的容器。

• 垂直堆叠（Vertical Stack）：将子元素从上到下排列
• 水平堆叠（Horizontal Stack）：将子元素从左到右排列
• 分割线（Dividers，水平和垂直）：用于在视觉上分隔内容区域的线条
• 轮播（Carousel）：可滑动的容器
• 底部面板（Bottom Sheet）：从屏幕底部滑出的悬浮面板

文本

文本可以是静态内容，也可以包含变量（例如用户名）和本地化内容。

以下文本预设为标准配置。如需修改此列表，请添加或删除已保存的文本样式：

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

媒体

• Icon：内置图标库中的矢量图标，可自定义大小和颜色
• Image：图片——上传本地文件或提供 URL
• Video：嵌入式视频播放器，支持最大 50MB 的文件，支持循环播放。

列表

列表元素以行列形式组织内容，用于展示统一格式的数据。从底层来看，列表是一种容器。

• 图标列表：每行包含一个前置图标和文本标签
• 时间轴：带有连接步骤指示器的垂直序列
• 图片列表：每行包含一个前置图片和文本
• 图标卡片：带有居中图标的网格卡片
• 图片卡片：带有图片的网格卡片
• 对比表格：多列表格，用于对比不同方案的功能（例如免费版 vs 专业版）

徽标

一种小型叠加标签，用于突出显示某个元素——通常用于推广折扣或特定方案（例如”节省 5%”）。使用绝对定位将徽标叠加到其他元素上方。

勾选标记

用于可选择元素内部的选中状态指示图标。每种勾选标记预设均包含选中和未选中两种状态，会根据用户操作自动切换。

• Checkbox
• Circle
• Radiobutton
• Toggle

表单与测验

按钮

按钮在点击时触发操作——跳转到另一个屏幕、打开 URL 或关闭流程。

每个预设都是一个起点——你可以重新设置样式并指定任意操作。在 Interactions 选项卡中配置按钮行为。

• Base：带居中文字的常规按钮
• Right Icon：右侧带图标的按钮
• With Subtitle：包含两行文字
• Pulse Animation：包含脉冲动画效果
• Purchase：触发购买操作
• Secondary Outline：用于次要操作的描边按钮
• Back：返回上一屏
• Close flow：退出流程
• View more plans：展示更多产品选项
• Links：一组底部按钮（Restore、Terms of Service、Privacy Policy）

输入框

输入框允许用户输入数据。每种类型都会强制使用相应的输入方式并进行格式校验。

• 文本
• 电子邮件
• 密码
• 数字
• 手机号码
• 日期
• 时间
• 日期与时间

日期、时间以及日期与时间输入框在点击时会调出设备原生选择器（滚轮或日历）。

使用变量来处理用户输入并影响条件逻辑。

测验

测验元素为调查问卷、偏好收集和用户细分提供多选项界面。设置交互，根据用户的答案对流程进行分支跳转。

• Icon Options：带图标的单列列表
• Emoji Options：带 Emoji 的单列列表
• Image Options：带图片的单列列表
• Icon Grid：带图标的多列网格
• Emoji Grid：带 Emoji 的多列网格
• Image Grid：带图片的多列网格
• Rating：数字评分（例如 1–5）

选项卡

选项卡将页面某一区域拆分为可切换的内容面板。用户选择某个选项卡后，下方内容随之更新。常用于对产品套餐进行分组，或在月付与年付方案之间切换。

• 分段控件：带圆角边框的胶囊形切换器，选中项有包裹样式
• 按钮选项卡：独立的按钮样式选项卡
• 下划线：文字标签，选中项下方显示下划线

付费墙与商务

产品

产品元素用于展示应用内购买详情并处理产品选择。每种预设以不同的布局排列产品数据。将你的产品与之关联，即可用 Adapty 中的真实数据填充这些元素。

• Vertical List：垂直堆叠的产品卡片
• Horizontal List：水平并排的产品卡片
• Feature Carousel：可滑动的功能清单卡片
• Feature Cards：静态功能清单卡片
• Banner List：带内联徽章的紧凑行

试用切换

这是一个用于在标准价格与免费试用优惠之间切换所展示产品的开关。激活后，产品选择和元素状态会自动更新。

用户互动

预设样式的用户评分模块，有助于建立信任感并提升转化率。这些模板均为基础容器，内含占位内容。

• Review：显示星级评分、评论内容及评论者姓名
• Rating：以星形图标展示数字评分
• App Rating：大号评分数字，配有星级进度条和评论数量
• Social Proof：头像叠加展示，并显示用户总数

倒计时

显示倒计时的小时、分钟和秒数，归零为止。用它为限时优惠制造紧迫感。计时器到达零时可触发相应操作——例如跳转到其他页面或隐藏折扣标签。

• Inline：紧凑的数字显示
• Inline with units：带单位标签的数字显示
• Badge：小型高亮计时器浮层
• Blocks：分别显示天、小时、分钟和秒的独立卡片

进度

进度指示器

基于步骤的进度条，用于显示用户在多屏流程中所处的位置。适合用于用户引导序列，让用户了解还剩多少步骤。

• 线性（Linear）：单条连续进度条，随用户操作逐步填满
• 分段（Segmented）：进度条被分为若干离散段，每步对应一段
• 连接器（Connectors）：带编号的步骤标记，由短连接线相连

加载动画

用于过渡场景的动态加载指示器。当应用处理用户数据时（例如提交问卷后），可使用加载动画。

• Spinner：旋转圆形指示器
• Spinner with label：带文字标签的旋转指示器（如”Loading…”）
• Loader：水平进度条