折叠面板

演示说明

本教程将带你从 0 到 1 搭建一个可点击展开 / 收起的折叠面板（FAQ）组件，并最终实现可复用的组件结构，适用于 FAQ、帮助中心等常见场景。

第一步：创建组件

1. 选中 item 所在的层级
2. 鼠标右键，创建组件并命名为 FAQItem

如下图所示：

第二步：设置组件变形（折叠 / 展开状态）

1. 调整组件基础结构

• 选中最外层组件
• 将高度设置为 自适应

2. 配置「默认」变形（折叠状态）

在默认变形下：

• 将 “回答”文本 和 分割线 的可见性设置为 否
• 移除根组件的背景样式

3. 添加「展开」变形

1. 新增一个组件变形

   

2. 在变形 1 中：
   • 将 “回答”文本 和 分割线 的可见性设置为 是

   • 为组件添加一个 浅紫色背景

     

3. 选中 箭头图标，旋转 180°，用于表示展开状态

   

第三步：添加交互逻辑

1. 折叠 → 展开

• 在 默认变形 下，选中标题分组

• 点击右侧 交互「+」，选择 变形

  

• 触发方式选择 点击

• 目标变形设置为 变形 1

  

2. 展开 → 折叠

• 在 变形 1 下，选中标题分组
• 调整点击交互

• 将目标变形设置为 默认

  

预览效果

此时预览页面，即可看到点击标题后，内容展开 / 收起的交互效果。

如何实现高复用

1. 将文案抽象为变量

标题文本

1. 选中标题文本组件

2. 在文本属性中点击 「+」 → 创建变量

   

创建完成后，标题已绑定文本变量：

可点击蓝色变量名，重命名为更语义化的名称（如 标题）：

回答文本

• 选中默认状态下的 “回答”文本组件

• 使用同样方式创建文本变量（如 回答）

  

2. 在页面中配置组件内容

1. 回到页面
2. 选中 FAQItem 组件

3. 在右侧组件属性区域，可以看到 标题 和 回答 两个可配置字段

   

修改标题后，页面内容会同步更新：

3. 复用到其他问题项

1. 选中其他问题分组

2. 鼠标右键 → 替换为组件 → 选择 FAQItem

   

只需修改对应的标题和回答即可：

对其他问题重复相同操作即可。

总结

通过组件 + 变形 + 交互 + 文本变量：

• 你可以快速搭建一个 可点击展开的折叠面板
• 所有样式集中维护，内容按需配置
• 后续只需修改一次组件，页面中所有引用都会同步更新

到这里，一个高复用、易维护的 FAQ 折叠组件就完成啦 🚀