应用栏是一种容器,可让用户访问关键功能和导航项。应用栏有两种类型,即顶部应用栏和底部应用栏。它们各自的外观和用途如下:
类型 |
外观 |
目的 |
---|---|---|
顶部应用栏 |
横跨屏幕顶部。 |
提供对关键任务和信息的访问权限。通常用于托管标题、核心操作项和某些导航项。 |
底部应用栏 |
横跨屏幕底部。 |
通常包含核心导航项。还可以提供对其他关键操作的访问权限,例如通过所含的悬浮操作按钮。 |
如需实现顶部应用栏和底部应用栏,请分别使用 TopAppBar
和 BottomAppBar
可组合项。它们可让您创建包含导航和操作控件且符合 Material Design 原则的一致界面。
顶部应用栏
下表概述了四种顶部应用栏:
类型 |
示例 |
---|---|
小型:适用于不需要进行大量导航或操作的屏幕。 |
|
居中对齐:适用于包含单个主要操作的屏幕。 |
|
中:适用于需要适度导航和操作的屏幕。 |
|
大型:适用于需要大量导航和操作的屏幕。 |
API Surface
可让您实现四个不同顶部应用栏的各种可组合项非常相似。它们有几个共同的关键参数:
title
:应用栏中显示的文本。navigationIcon
:导航的主图标。显示在应用栏左侧。actions
:可让用户执行关键操作的图标。它们显示在应用栏的右侧。scrollBehavior
:确定顶部应用栏如何响应 Scaffold 内部内容的滚动。colors
:确定应用栏的显示方式。
滚动行为
您可以控制当用户滚动给定 Scaffold 的内部内容时,应用栏如何响应。为此,请创建一个 TopAppBarScrollBehavior
实例,并将其传递给顶部应用栏中的 scrollBehavior
参数。
TopAppBarScrollBehavior
有三种类型。具体如下:
enterAlwaysScrollBehavior
:当用户调出 Scaffold 的内部内容时,顶部应用栏会收起。当用户随后下拉内部内容时,应用栏就会展开。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
传递的值。因此,当用户滚动 Scaffold 的内部内容时,该栏会收起。
@Composable fun CenterAlignedTopAppBarExample() { val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState()) Scaffold( modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection), topBar = { CenterAlignedTopAppBar( colors = TopAppBarDefaults.centerAlignedTopAppBarColors( 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.AutoMirrored.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.AutoMirrored.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.AutoMirrored.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." ) } }
此实现如下所示: