显示顶部应用栏

使用 TopAppBar 可组合项,创建顶部应用栏,以帮助用户导航和访问应用中的功能。

版本兼容性

此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。

依赖项

为顶部应用栏创建可组合项

使用 MediumTopAppBar 可组合项创建顶部应用栏,当用户向下滚动内容区域时,该应用栏会折叠;当用户滚动回内容顶部时,会展开。

代码要点

  • 一个外部的 Scaffold,设置了 TopBar
  • 一个由单个 Text 元素组成的标题。
  • 一个定义了单个操作的顶部栏。
  • 一个 IconButton 操作,带有一个用于执行操作的 onClick lambda。
  • 一个 IconButton,其中包含一个 Icon,该 Icon 具有图标图片和内容描述文本。
  • Scaffold 内部内容的滚动行为定义为 enterAlwaysScrollBehavior()。当用户向上拖动内部内容时,应用栏会折叠;当用户向下拖动内部内容时,应用栏会展开。
  • 除了包含标题的 MediumTopBar,您还可以使用
    • TopAppBar:用于不需要大量导航或操作的屏幕。
    • CenterAlignedTopAppBar:用于具有单个主要操作的屏幕。标题在此组件中居中显示。
    • MediumTopAppBar:用于需要中等程度导航和操作的屏幕。
    • LargeTopAppBar:用于需要大量导航和操作的屏幕。它比 MediumTopAppBar 使用更多内边距,并将标题置于所有其他图标下方。

结果

图 1. 中号顶部应用栏。

包含本指南的合集

本指南是以下精选的快速入门指南合集的一部分,这些合集涵盖了更广泛的 Android 开发目标

了解如何使用标准化平台构建复杂的用户界面。Scaffold 将不同的 UI 部分组合在一起,让应用具有一致的外观和风格。
了解可组合函数如何让您轻松创建基于 Material Design 设计系统的精美 UI 组件。

有问题或反馈

访问我们的常见问题页面,了解快速入门指南,或者联系我们并告诉我们您的想法。