应用栏是位于屏幕顶部或底部的容器,为用户提供关键功能和导航项的访问权限
类型 |
外观 |
用途 |
---|---|---|
顶部应用栏 | 位于屏幕顶部。 |
提供关键任务和信息的访问权限。通常包含标题、核心操作项和某些导航项。 |
底部应用栏 | 位于屏幕底部。 |
通常包含核心导航项。还可能提供对其他操作的访问权限,例如通过悬浮操作按钮。 |
版本兼容性
此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。
依赖项
实现顶部应用栏
以下代码展示了四种顶部应用栏的实现,包括如何控制滚动行为的各种示例。
小型顶部应用栏
要创建小型顶部应用栏,请使用 TopAppBar
可组合项。这是最简单的顶部应用栏,在此示例中仅包含一个标题。
以下示例没有为 TopAppBar
传递 scrollBehavior
的值,因此顶部应用栏不会对内部内容的滚动做出反应。
结果

居中对齐的顶部应用栏
居中对齐的顶部应用栏与小型应用栏相同,不同之处在于标题在组件中居中。要实现它,请使用专用的 CenterAlignedTopAppBar
可组合项。
此示例使用 enterAlwaysScrollBehavior()
获取传递给 scrollBehavior
的值。当用户滚动 Scaffold 的内部内容时,该栏会收起。
结果

中型顶部应用栏
中型顶部应用栏将标题置于任何附加图标下方。要创建一个,请使用 MediumTopAppBar
可组合项。
与之前的代码类似,此示例使用 enterAlwaysScrollBehavior()
获取传递给 scrollBehavior
的值。
结果
enterAlwaysScrollBehavior
滚动行为的中型顶部应用栏。大型顶部应用栏
大型顶部应用栏类似于中型,但标题与图标之间的内边距更大,并且总体上占用屏幕空间更多。要创建一个,请使用 LargeTopAppBar
) 可组合项。
此示例使用 exitUntilCollapsedScrollBehavior()
获取传递给 scrollBehavior
的值。当用户滚动 Scaffold 的内部内容时,该栏会收起,但当用户滚动到内部内容的末尾时,该栏会展开。
结果

实现底部应用栏
要创建底部应用栏,请使用 BottomAppBar
可组合项,它类似于顶部应用栏可组合项。
您为以下关键参数传递可组合项
actions
:一系列图标,显示在栏的左侧。这些图标通常是给定屏幕的关键操作或导航项。floatingActionButton
:悬浮操作按钮,显示在栏的右侧。
结果

要点
- 您通常将应用栏传递给
Scaffold
可组合项,它具有特定的参数来接收它们。 用于实现顶部应用栏的可组合项共享关键参数
title
:显示在整个应用栏中的文本。navigationIcon
:主要的导航图标,显示在应用栏的左侧。actions
:为用户提供关键操作访问权限的图标,显示在应用栏的右侧。scrollBehavior
:确定顶部应用栏如何响应 Scaffold 内部内容的滚动。colors
:确定应用栏的外观。
您可以控制应用栏在用户滚动 Scaffold 内部内容时的响应方式。为此,请创建一个
TopAppBarScrollBehavior
实例,并将其作为scrollBehavior
参数传递给顶部应用栏。共有三种类型的TopAppBarScrollBehavior
enterAlwaysScrollBehavior
:当用户向上拉动 Scaffold 的内部内容时,顶部应用栏会收起。当用户向下拉动内部内容时,应用栏会展开。exitUntilCollapsedScrollBehavior
:类似于enterAlwaysScrollBehavior
,但当用户滚动到 Scaffold 内部内容末尾时,应用栏也会展开。pinnedScrollBehavior
:应用栏保持原位,不响应滚动。
包含本指南的合集
本指南是这些精心策划的快速指南合集的一部分,这些合集涵盖了更广泛的 Android 开发目标
