应用栏是一种容器,可让用户访问应用的主要功能和 导航项。应用栏分为两种类型:顶部应用栏和底部应用 栏。它们各自的外观和用途如下:
类型 |
外观 |
用途 |
---|---|---|
顶部应用栏 |
横跨屏幕顶部。 |
提供对关键任务和信息的访问权限。通常用于托管标题、核心操作项和某些导航项。 |
底部应用栏 |
横跨屏幕底部。 |
通常包含核心导航项。还可以提供对其他关键操作的访问权限,例如通过所含的悬浮操作按钮。 |
如需实现顶部应用栏和底部应用栏,请使用 TopAppBar
和
BottomAppBar
可组合项。它们让您能够创建一致的
用于封装导航和操作控件的界面,
符合 Material Design 原则。
顶部应用栏
下表概述了四种顶部应用栏:
类型 |
示例 |
---|---|
小型:适用于不需要进行大量导航或操作的屏幕。 |
|
居中对齐:适用于包含单个主要操作的屏幕。 |
|
中:适用于需要适度导航和操作的屏幕。 |
|
大型:适用于需要大量导航和操作的屏幕。 |
|
API Surface
可让您实现 4 个不同的热门应用的各种可组合项 非常相似它们有几个共同的关键参数:
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) } }
此实现如下所示:
![小型顶部应用栏示例。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-small.png?authuser=8&hl=el)
已居中对齐
居中对齐的顶部应用栏与小应用栏基本相同,
但标题位于组件的中心位置要实现它,请使用
专用的 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) } }
此实现如下所示:
![在此处撰写您的替代文本](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-centered.png?authuser=8&hl=el)
中
中等顶部应用栏会将标题置于任何其他图标下方。要创建
首先,使用 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
。因此,该栏会在用户滚动网页时
基架的内部内容,但会在用户滚动到末尾时展开
内部内容。
@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) } }
此实现如下所示:
![一个应用中的屏幕,底部应用栏左侧是操作图标,右侧是悬浮操作按钮。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-large.png?authuser=8&hl=el)
底部应用栏
如需创建底部应用栏,请使用 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." ) } }
此实现如下所示:
![一个应用中的屏幕,底部应用栏左侧是操作图标,右侧是悬浮操作按钮。](https://developer.android.google.cn/static/develop/ui/compose/images/components/appbar-bottom.png?authuser=8&hl=el)