← 返回 Android 词条
分段控制器
在 Android 上叫Segmented Button
Compose Material 3: SingleChoiceSegmentedButtonRow / MultiChoiceSegmentedButtonRow
Material 3 提供单选和多选两种分段按钮组。与本词条常见的互斥切换场景对应时,应使用单选版本。
它把少量互斥选项并排连在一起,点其中一格就会立即切换当前选择或内容。
- 几个选项挤在一条里只能选一个
- 一排连在一起点哪个哪个亮的按钮
- 像药丸一样分成几格的选择按钮
- 分段控制器
- 分段选择器
- 分段按钮
- 胶囊切换
其他平台的相似实现
Web需自己实现
该平台没有原生实现Web 没有原生的分段控制器元素。
看 Web 视角 →iOS原生支持
Segmented Control异名适合少量、互斥且地位相同的选项,用户选中后通常立即生效。
看 iOS 视角 →使用规范
什么时候用
- 在两到五个简短、互斥且同等重要的选项之间切换
- 选择后可以立即更新当前内容,不需要额外提交按钮
- 所有选项需要同时可见,方便用户直接比较
- 当前选中项需要持续清楚可见,让用户随时知道正在查看哪种状态
什么时候别用
- 选项很多或标签很长 → 用 Select、菜单或单独的选择页
- 需要同时选择多个项目 → 除非平台明确使用多选分段按钮,否则用复选框
- 用于应用一级页面导航 → 用 Tab Bar 或 Navigation Bar
Android 出处
查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。