显示顶部应用栏

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

版本兼容性

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

依赖项

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

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

代码的关键点

  • 具有设置的 TopBar 的外部 Scaffold
  • 由单个 Text 元素组成的标题。
  • 具有定义的单个操作的顶部栏。
  • 具有执行操作的 onClick lambda 的 IconButton 操作。
  • 包含具有图标图像和内容描述文本的 IconIconButton
  • Scaffold 内部内容的滚动行为定义为 enterAlwaysScrollBehavior()。当用户向上拉动内部内容时,这会折叠应用栏,而当用户向下拉动内部内容时,这会展开应用栏。
  • 除了包含标题的 MediumTopBar 之外,您还可以使用
    • TopAppBar:用于不需要大量导航或操作的屏幕。
    • CenterAlignedTopAppBar:用于具有单个主要操作的屏幕。标题在组件内居中。
    • MediumTopAppBar:用于需要适量导航和操作的屏幕。
    • LargeTopAppBar:用于需要大量导航和操作的屏幕。与 MediumTopAppBar 相比,它使用更多的填充,并将标题放置在任何其他图标下方。

结果

图 1. 中等顶部应用栏。

包含本指南的收藏夹

本指南是这些经过精心策划的快速指南收藏夹的一部分,涵盖更广泛的 Android 开发目标

了解如何使用标准化平台构建复杂的用户界面。脚手架将 UI 的不同部分组合在一起,使应用具有连贯的外观和风格。
了解可组合函数如何使您能够轻松地根据 Material Design 设计系统创建美观的 UI 组件。

有问题或反馈?

访问我们的常见问题页面,了解有关快速指南的信息,或与我们联系,让我们了解您的想法。