← 返回 iOS 词条

底部标签栏

iOS原生支持

在 iOS 上叫Tab Bar

SwiftUI: TabView|UIKit: UITabBarController / UITabBar

适用范围:iOS / iPadOS

Tab Bar 用于应用最顶层的少量同级区域,通常持续显示在屏幕底部,并明确标出当前所在区域。

它是固定在页面底部的一排入口,用来在几个同级的主要页面之间来回切换。

  • 手机下面那排切换页面的按钮
  • 底下有首页消息我的那一排
  • 点底下图标换页面的东西
  • 底部标签栏
  • 底部导航栏
  • 页签栏
  • 主导航栏

其他平台的相似实现

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

Web 没有专门对应移动端底部标签栏的原生组件。

看 Web 视角 →
Android原生支持
Navigation Bar异名

Material 3 把旧称 Bottom Navigation 改为 Navigation Bar,用于三个到五个同等重要的主要目的地。

看 Android 视角 →

使用规范

什么时候用

  • 应用有少量、长期稳定且同等重要的一级页面
  • 用户需要频繁在这些一级页面之间来回切换
  • 每个入口都能用简短文字和易懂图标表达
  • 当前所在的一级页面需要始终清楚标出,切换后仍保留各页面内部状态

什么时候别用

  • 页面存在前后层级或需要返回上一级 → 用 Navigation Bar 或 Top App Bar
  • 入口超过五个或经常变化 → 改用其他导航结构
  • 用于同一页面里的内容筛选 → 用 Segmented Control 或 Tabs

容易混淆

iOS 出处

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