应用栏是一种容器，可让用户访问关键功能和导航项。应用栏分为两种类型：顶部应用栏和底部应用栏。它们各自的外观和用途如下：
类型 |
外观 |
用途 |
|---|---|---|
顶部应用栏 |
在屏幕顶部。 |
提供对关键任务和信息的访问。通常托管标题、核心操作项和某些导航项。 |
底部应用栏 |
屏幕底部。 |
通常包含核心导航项。此外，应用还可能会支持其他关键操作，例如通过实心悬浮操作按钮执行。 |
如需实现顶部应用栏和底部应用栏，请分别使用 TopAppBar 和 BottomAppBar 可组合项。借助这些 API，您可以创建封装了导航和操作控件且符合 Material Design 原则的一致界面。
顶部应用栏
下表概述了四种顶部应用栏：
类型 |
示例 |
|---|---|
小型：适用于不需要执行大量导航或操作的屏幕。 |
|
居中对齐：适用于包含一项主要操作的屏幕。 |
|
中等：适用于需要适度导航和操作的屏幕。 |
|
大型：适用于需要执行大量导航和操作的屏幕。 |
|
API Surface
用于实现四个不同顶部应用栏的各种可组合项非常相似。它们有几个关键参数：
title：显示在应用栏中的文本。navigationIcon：导航的主图标。该图标显示在应用栏的左侧。actions：为用户提供关键操作访问权限的图标。它们显示在应用栏的右侧。scrollBehavior：确定顶部应用栏如何响应 Scaffold 内部内容的滚动。colors：确定应用栏的显示方式。
滚动行为
您可以控制在用户滚动给定基架的内部内容时应用栏如何响应。为此，请创建一个 TopAppBarScrollBehavior 实例，并将其传递给顶部应用栏中的 scrollBehavior 参数。
TopAppBarScrollBehavior 有三种类型。具体如下：
enterAlwaysScrollBehavior：当用户调出基架的内部内容时，顶部应用栏会收起。当用户将内部内容下拉时，应用栏会展开。exitUntilCollapsedScrollBehavior：与enterAlwaysScrollBehavior类似，不过当用户到达 Scaffold 内部内容的末尾时，应用栏会额外展开。pinnedScrollBehavior：应用栏保持不变，不对滚动做出响应。
以下示例实现了其中几个选项。
示例
下面几部分提供了四种不同类型的顶部应用栏的实现，包括有关如何控制滚动行为的各种示例。
小
如需创建小型顶部应用栏，请使用 TopAppBar 可组合项。这是最简单的顶部应用栏，在本示例中，它只包含一个标题。
以下示例不会向 TopAppBar 传递 scrollBehavior 的值，因此不会对内部内容的滚动做出响应。
@Composable
fun SmallTopAppBarExample() {
Scaffold(
topBar = {
TopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text("Small Top App Bar")
}
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
此实现如下所示：
已居中对齐
居中对齐的顶部应用栏与小应用栏基本相同，只不过标题位于组件内。如需实现它，请使用专用的 CenterAlignedTopAppBar 可组合项。
此示例使用 enterAlwaysScrollBehavior() 获取其为 scrollBehavior 传递的值。因此，当用户滚动基架的内部内容时，该栏会收起。
@Composable
fun CenterAlignedTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Centered Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior,
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
此实现如下所示：
Medium
中等顶部应用栏会将标题放置在任何其他图标下方。如需创建这样的可组合项，请使用 MediumTopAppBar 可组合项。
与上一个代码段一样，此示例使用 enterAlwaysScrollBehavior() 获取其为 scrollBehavior 传递的值。
@Composable
fun MediumTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
MediumTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Medium Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
此实现如下所示，其中演示了 enterAlwaysScrollBehavior() 的滚动行为的显示方式：
大
较大的顶部应用栏类似于中等，但标题和图标之间的内边距较大，并且总体上占用的屏幕空间更多。如需创建这样的可组合项，请使用 LargeTopAppBar 可组合项。
与前面的代码段不同，此示例使用 exitUntilCollapsedScrollBehavior() 获取其为 scrollBehavior 传递的值。因此，该栏会在用户滚动 Scaffold 的内部内容时收起，然后在用户滚动到内部内容的末尾时展开。
@Composable
fun LargeTopAppBarExample() {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
LargeTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Large Top App Bar",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},
scrollBehavior = scrollBehavior
)
},
) { innerPadding ->
ScrollContent(innerPadding)
}
}
此实现如下所示：
底部应用栏
如需创建底部应用栏，请使用 BottomAppBar 可组合项。使用此可组合项与本页前面部分中介绍的顶部应用栏可组合项非常相似。您需要为以下关键参数传递可组合项：
actions：显示在栏左侧的一系列图标。它们通常是给定屏幕上的关键操作或导航项。floatingActionButton：显示在栏右侧的悬浮操作按钮。
@Composable
fun BottomAppBarExample() {
Scaffold(
bottomBar = {
BottomAppBar(
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(Icons.Filled.Check, contentDescription = "Localized description")
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Mic,
contentDescription = "Localized description",
)
}
IconButton(onClick = { /* do something */ }) {
Icon(
Icons.Filled.Image,
contentDescription = "Localized description",
)
}
},
floatingActionButton = {
FloatingActionButton(
onClick = { /* do something */ },
containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
) {
Icon(Icons.Filled.Add, "Localized description")
}
}
)
},
) { innerPadding ->
Text(
modifier = Modifier.padding(innerPadding),
text = "Example of a scaffold with a bottom app bar."
)
}
}
此实现如下所示：
