← 返回 Android 词条

顶部导航栏

Android原生支持

在 Android 上叫Top App Bar

Compose Material 3: TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar

适用范围:Android 手机 / 平板;Material 3 Compose

Top App Bar 放在屏幕顶部,用来展示当前页面标题、层级导航入口和与当前页面相关的操作。

它是页面最上方显示标题、返回入口和当前页面操作的一条区域。

  • 页面最上面带返回和标题的那一条
  • 上面左边有返回箭头的那栏
  • 顶上写着页面名字的地方
  • 顶部导航栏
  • 顶栏
  • 标题栏
  • 页面导航条

其他平台的相似实现

Web原生支持
Navigation异名

Web 的 <nav> 表达导航语义,但不会自带顶栏外观、返回按钮或固定定位,这些视觉与行为仍需自行实现。

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

Navigation Bar 表示当前层级,通常包含返回入口、页面标题和少量当前页面操作。

看 iOS 视角 →

使用规范

什么时候用

  • 页面需要明确显示当前位置或标题
  • 存在返回上一级、关闭当前页或打开上层导航的入口
  • 有少量只针对当前页面的常用操作

什么时候别用

  • 切换几个同级的一级页面 → 用 Tab Bar 或 Navigation Bar
  • 操作很多或标题很长,已经无法在一行内清楚表达 → 重新安排信息层级
  • 纯展示页面没有标题、层级或页面操作时,不必为了装饰强行添加

容易混淆

Android 出处

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