Segmented control 分段控制器
/seg-MEN-ted con-TROLE/ · noun · 导航类模式 · #048
一排等宽按钮，同一时刻只有一个胜出。最适合 2–5 个平级视图之间的切换——千万别拿它放操作。
你可能会这样叫它
- “分段选择器”
- “切换列表和网格的按钮”
- “连在一起只能选一个的按钮”
- “胶囊切换按钮”
- “分段按钮”
……它的名字是 分段控制器（Segmented control）。
常见问题
分段控制器和标签页（Tabs）有什么区别？
标签页切换的是"看哪块内容"，每个标签各管一块面板；分段控制器切换的是"同一份内容怎么展示或筛选"，比如同一批结果的列表 / 网格 / 地图。如果切换后整页换成不相干的内容，就该用标签页或标签栏，而不是分段控制器。
分段控制器在 Material Design 里叫什么？
Segmented buttons（分段按钮）。Material 3 用这个名字指同一个模式：两到五个连在一起的选项，可单选或多选；Apple 的设计规范里叫 segmented control。
代码里叫什么
| SwiftUI | Picker .pickerStyle(.segmented) |
|---|---|
| UIKit | UISegmentedControl |
| Jetpack Compose | SingleChoiceSegmentedButtonRow SegmentedButton |
| Android (Views) | MaterialButtonToggleGroup |
| Flutter | SegmentedButton CupertinoSlidingSegmentedControl |
| Web (HTML / ARIA) | role="radiogroup" 没有原生元素，通常用单选组或带 aria-pressed 的按钮实现 |
复制给 AI 编程工具
在内容上方加一个分段控制器：两到五个选项排成一行、等宽、连在一起。同一时刻只有一段被选中并填充高亮；选另一段时，改变的是同一份内容的展示或筛选方式，不跳转页面。对键盘和读屏用户，它要表现为一个单选组（radio group 语义）。