手风琴折叠组展示
它把多段内容收在各自标题下面,用户点击标题后展开或收起对应内容。
- 点一个标题展开内容再点就收起
- 一排问题点开才看答案的东西
- 几块内容一次只展开一块
- 折叠面板组
- 伸缩列表
- 可展开分组
示例
Web / iOS / Android 对照
Web原生支持
支持 details name 分组的现代浏览器
Disclosure Group
也叫 Accordion · Exclusive Disclosure Group
多个 <details name="…">
原生 details 可直接展开收起;相同 name 可限制为同时只展开一项。键盘和视觉细节仍需测试。
iOS需自己实现
iOS / iPadOS
iOS 没有独立的手风琴容器,系统只提供单个 Disclosure Group 这一层原语。
通常怎么做:并列多个 DisclosureGroup,由应用自行协调展开状态。
Android需自己实现
Android 手机 / 平板
Accordion
也叫 Expansion Panel
通用 Material 3 没有 Accordion 或 Expansion Panel 组件,需要用列表、按钮和展开动画组合。
通常怎么做:标题用可点击行并暴露展开状态,内容用 AnimatedVisibility;保持焦点顺序不跳动。
使用规范
什么时候用
- 内容可以按主题分段,用户通常只需阅读其中少数部分
什么时候别用
- 内容很短可以一次读完,或用户必须同时比较多个分组
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。