组件：折叠面板

折叠面板组件由多个可独立或联动展开/折叠的面板组成，每个面板包含标题和内容区域。支持手风琴模式（同一时间仅展开一个面板），适用于内容分组、FAQ、产品详情展示、设置项分组等需要节省空间且允许用户按需查看详细内容的场景。

典型使用场景：

• 常见问题（FAQ）列表
• 产品规格参数展示
• 设置项分组（如系统设置、用户偏好）
• 文档章节折叠
• 评论/回复区域折叠

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边 顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

样式美化参考

折叠面板的外观可通过继承的视图属性进行整体调整，同时每个面板的样式由组件内部管理，但可通过 CSS 类自定义：

• 整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #e8e8e8"）、边框圆角（建议 "8px"）等属性美化。
• 面板标题：标题区域默认具有背景色和点击指示（箭头），可通过 CSS 类自定义字体、颜色、内边距等。
• 面板内容：内容区域可通过 内边距 控制内部间距，背景色等通过 CSS 覆盖。
• 手风琴模式：在手风琴模式下，展开一个面板会自动折叠其他面板，交互更紧凑。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-collapse .collapse-panel {
    border-bottom: 1px solid #f0f0f0;
}
.my-collapse .collapse-header {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    background-color: #fafafa;
    cursor: pointer;
    transition: background-color 0.2s;
}
.my-collapse .collapse-header:hover {
    background-color: #f0f0f0;
}
.my-collapse .collapse-content {
    padding: 16px;
    background-color: #ffffff;
}

在代码中应用样式类：折叠面板1.添加样式类("my-collapse")

基础示例

创建一个包含三个面板的折叠面板，默认展开第一个，非手风琴模式。

变量 折叠面板1 = 创建 折叠面板()
折叠面板1.左边 = 50
折叠面板1.顶边 = 50
折叠面板1.宽度 = 500
折叠面板1.边框 = "1px solid #e8e8e8"
折叠面板1.边框圆角 = "8px"
折叠面板1.手风琴 = 假

' 创建面板内容（使用原生 DOM 元素）
变量 内容1 = 创建元素("div")
内容1.innerHTML = "<p>这是第一个面板的内容，默认展开。</p>"

变量 内容2 = 创建元素("div")
内容2.innerHTML = "<p>这是第二个面板的内容。</p>"

变量 内容3 = 创建元素("div")
内容3.innerHTML = "<p>这是第三个面板的内容。</p>"

' 添加面板（标题, 内容元素, 键）
折叠面板1.添加面板("面板 1", 内容1, "p1")
折叠面板1.添加面板("面板 2", 内容2, "p2")
折叠面板1.添加面板("面板 3", 内容3, "p3")

' 默认展开第一个面板
折叠面板1.展开("p1")

添加组件(折叠面板1)

综合示例：产品规格 FAQ

本示例构建一个产品常见问题折叠面板，包含手风琴模式，点击面板时切换展开/折叠并显示当前状态。

' ========== 创建折叠面板（手风琴模式） ==========
变量 FAQ面板 = 创建 折叠面板()
FAQ面板.左边 = 30
FAQ面板.顶边 = 30
FAQ面板.宽度 = 600
FAQ面板.边框 = "1px solid #d9d9d9"
FAQ面板.边框圆角 = "8px"
FAQ面板.背景颜色 = "#ffffff"
FAQ面板.手风琴 = 真  ' 一次只展开一个
添加组件(FAQ面板)

' ========== 准备 FAQ 数据 ==========
变量 数据 = [
    { 标题: "产品支持哪些支付方式？", 内容: "我们支持微信支付、支付宝、银行卡和信用卡支付。" },
    { 标题: "如何退货？", 内容: "您可以在订单页面发起退货申请，我们会在 3 个工作日内处理。" },
    { 标题: "保修期是多久？", 内容: "本产品提供 12 个月的免费保修服务。" },
    { 标题: "是否可以开具发票？", 内容: "可以，下单时填写发票信息，我们会随货邮寄。" }
]

' ========== 添加面板 ==========
变量循环(i = 0, 取数组成员数(数据), 1)
    变量 项 = 数据[i]
    ' 创建内容 DOM 元素
    变量 内容元素 = 创建元素("div")
    内容元素.innerHTML = "<p style='margin:0;color:#555;'>" + 项.内容 + "</p>"
    ' 添加面板（标题、内容、键）
    FAQ面板.添加面板(项.标题, 内容元素, "faq_" + i)
结束循环

' ========== 默认展开第一个 ==========
FAQ面板.展开("faq_0")

' ========== 状态显示标签 ==========
变量 状态标签 = 创建 标签()
状态标签.左边 = 30
状态标签.顶边 = 320
状态标签.文本 = "当前展开：faq_0"
状态标签.字体大小 = "14px"
状态标签.文本颜色 = "#999"
添加组件(状态标签)

' ========== 监听面板切换事件 ==========
FAQ面板.置面板被切换回调((源对象, 键, 是否展开) => {
    如果(是否展开)
        状态标签.文本 = "当前展开：" + 键
        调试输出("面板 " + 键 + " 已展开")
    否则
        状态标签.文本 = "面板 " + 键 + " 已折叠"
        调试输出("面板 " + 键 + " 已折叠")
    结束 如果
})

属性详解

手风琴

• 类型： 逻辑型
• 说明： 设置或获取是否启用手风琴模式。当为 真 时，每次只能展开一个面板，展开新面板时会自动折叠当前展开的面板；当为 假 时，多个面板可同时展开。默认 假。

函数详解

添加面板(标题, 面板元素, 键)

• 功能： 向折叠面板中添加一个新的面板。
• 参数：
  • 标题：文本型，必填，显示在面板标题栏的文本。
  • 面板元素：DOM 节点或视图组件，必填，面板展开时显示的内容区域。可传入原生 DOM 元素（通过 创建元素 获得）或视图组件的原生对象（通过 取原生对象() 获得）。
  • 键：文本型，必填，面板的唯一标识，用于后续展开、折叠、获取等操作。
• 返回值： 数值型，新面板在内部数组中的索引（从0开始）。
• 示例：

  ' 创建内容元素
  变量 内容 = 创建元素("div")
  内容.textContent = "这是内容"
  ' 添加面板
  变量 索引 = 折叠面板1.添加面板("标题", 内容, "myKey")
  

展开(键)

• 功能： 展开指定键的面板。如果已展开，则无变化。在手风琴模式下，会自动折叠其他面板。
• 参数： 键（文本型），面板的唯一标识。
• 返回值： 无。
• 示例： 折叠面板1.展开("key1")

折叠(键)

• 功能： 折叠指定键的面板。如果已折叠，则无变化。
• 参数： 键（文本型），面板的唯一标识。
• 返回值： 无。
• 示例： 折叠面板1.折叠("key1")

展开全部()

• 功能： 展开所有面板。在手风琴模式下，此方法无效（因为手风琴模式只允许展开一个）。
• 返回值： 无。
• 示例： 折叠面板1.展开全部()

折叠全部()

• 功能： 折叠所有面板。
• 返回值： 无。
• 示例： 折叠面板1.折叠全部()

取面板(键)

• 功能： 获取指定键的面板内容元素（DOM 节点）。
• 参数： 键（文本型）。
• 返回值： DOM 元素，若键不存在则返回 空。
• 示例： 变量 元素 = 折叠面板1.取面板("key1")

置面板被切换回调(回调函数)

• 功能： 设置面板展开或折叠时的回调函数。每当面板状态变化时触发。
• 参数： 回调函数，格式为 (源对象, 键, 是否展开) => { ... }。
  • 源对象：折叠面板组件本身。
  • 键：状态发生变化的面板键。
  • 是否展开：逻辑型，真 表示面板已展开，假 表示已折叠。
• 返回值： 无。
• 示例：

  折叠面板1.置面板被切换回调((源对象, 键, 是否展开) => {
      调试输出(键 + (是否展开 ? " 展开" : " 折叠"))
  })
  

清空()

• 功能： 移除所有面板，重置为空状态。
• 返回值： 无。
• 示例： 折叠面板1.清空()

事件说明

面板被切换(源对象, 键, 是否展开)

• 功能： 与 置面板被切换回调 等效，适用于设计文件（.spldg）中定义的组件。
• 示例：

  事件 折叠面板1.面板被切换(源对象, 键, 是否展开)
      调试输出("面板 " + 键 + (是否展开 ? " 展开" : " 折叠"))
  结束 事件
  

⚠️ 注意事项

1. 面板内容必须为 DOM 元素：添加面板 的第二个参数应为 DOM 节点（通过 创建元素 获得）或视图组件的原生对象。若传入视图组件，需调用 取原生对象() 方法。
2. 键的唯一性：每个面板的 键 必须唯一，否则会导致展开/折叠操作混淆。
3. 手风琴模式限制：当 手风琴 = 真 时，展开全部() 无效，且手动展开一个面板会自动折叠其他面板。
4. 回调触发时机：置面板被切换回调 在面板状态变化后触发，可用于同步 UI 状态或执行后续逻辑。
5. 清空后重新添加：清空() 会移除所有面板，如需重新添加，需再次调用 添加面板。
6. 样式定制：面板的标题和内容区域默认样式较简单，建议通过 CSS 类进行美化以匹配应用风格。
7. 性能考虑：如果面板数量很多（如几十个），建议使用虚拟滚动或分页加载，但折叠面板通常用于少量内容，性能影响不大。
8. 与卡片框的区别：折叠面板专注于折叠/展开交互，而卡片框是静态容器，二者可搭配使用。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档其它通用类组件_卡片框 —— 静态内容容器
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、循环语句等
• 文档综合演示：产品FAQ折叠面板 —— 实际应用示例