← 返回 iOS 词条

分段控制器

iOS原生支持

在 iOS 上叫Segmented Control

SwiftUI: Picker + .pickerStyle(.segmented)|UIKit: UISegmentedControl

适用范围:iOS / iPadOS

适合少量、互斥且地位相同的选项,用户选中后通常立即生效。标签应保持简短,避免挤压。

它把少量互斥选项并排连在一起,点其中一格就会立即切换当前选择或内容。

  • 几个选项挤在一条里只能选一个
  • 一排连在一起点哪个哪个亮的按钮
  • 像药丸一样分成几格的选择按钮
  • 分段控制器
  • 分段选择器
  • 分段按钮
  • 胶囊切换

其他平台的相似实现

Web需自己实现
该平台没有原生实现

Web 没有原生的分段控制器元素。

看 Web 视角 →
Android原生支持
Segmented Button异名

Material 3 提供单选和多选两种分段按钮组。

看 Android 视角 →

使用规范

什么时候用

  • 在两到五个简短、互斥且同等重要的选项之间切换
  • 选择后可以立即更新当前内容,不需要额外提交按钮
  • 所有选项需要同时可见,方便用户直接比较
  • 当前选中项需要持续清楚可见,让用户随时知道正在查看哪种状态

什么时候别用

  • 选项很多或标签很长 → 用 Select、菜单或单独的选择页
  • 需要同时选择多个项目 → 除非平台明确使用多选分段按钮,否则用复选框
  • 用于应用一级页面导航 → 用 Tab Bar 或 Navigation Bar

iOS 出处

查看 Web / iOS / Android 完整对照 →概念页上还有可交互示例。