应用栏

应用程序栏是容器，允许用户访问关键功能和导航项目。应用程序栏有两种类型，顶部应用程序栏和底部应用程序栏。它们各自的外观和用途如下

类型	外观	用途
顶部应用程序栏	屏幕顶部。	提供对关键任务和信息的访问权限。通常会托管标题、核心操作项和某些导航项目。
底部应用程序栏	屏幕底部。	通常包括核心导航项目。也可能提供对其他关键操作的访问权限，例如通过包含的浮动操作按钮。

An example of a top and bottom app bar. — **图 1.** 顶部应用程序栏（左）和底部应用程序栏（右）。

要实现顶部应用程序栏和底部应用程序栏，请分别使用 TopAppBar 和 BottomAppBar 可组合项。它们允许您创建一致的界面，这些界面封装了导航和操作控制，并与 Material Design 原则保持一致。

顶部应用程序栏

下表概述了四种类型的顶部应用程序栏

类型	示例
小：对于不需要太多导航或操作的屏幕。
居中对齐：对于具有单个主要操作的屏幕。
中：对于需要适度数量的导航和操作的屏幕。
大：对于需要大量导航和操作的屏幕。

API 表面

允许您实现四种不同顶部应用程序栏的各种可组合项非常相似。它们共享几个关键参数

title：出现在应用程序栏上的文本。
navigationIcon：导航的主要图标。出现在应用程序栏的左侧。
actions：为用户提供对关键操作的访问权限的图标。它们出现在应用程序栏的右侧。
scrollBehavior：确定顶部应用程序栏如何响应脚手架内部内容的滚动。
colors：确定应用程序栏的外观。

滚动行为

您可以控制应用程序栏在用户滚动给定脚手架的内部内容时如何响应。为此，请创建 TopAppBarScrollBehavior 的一个实例，并将其传递给您的顶部应用程序栏，以用于 scrollBehavior 参数。

有三种类型的 TopAppBarScrollBehavior。如下所示

enterAlwaysScrollBehavior：当用户向上拉动脚手架的内部内容时，顶部应用程序栏会折叠。当用户随后向下拉动内部内容时，应用程序栏会展开。
exitUntilCollapsedScrollBehavior：类似于 enterAlwaysScrollBehavior，但应用程序栏在用户到达脚手架内部内容的末尾时也会展开。
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)
    }
}AppBar.kt

此实现显示如下

An example of a small top app bar. — **图 2.** 小型顶部应用程序栏。

居中对齐

居中对齐的顶部应用程序栏本质上与小型应用程序栏相同，只是标题在组件中居中。要实现它，请使用专用的 CenterAlignedTopAppBar 可组合项。

此示例使用 enterAlwaysScrollBehavior() 获取它传递给 scrollBehavior 的值。因此，当用户滚动脚手架的内部内容时，栏会折叠。

@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)
    }
}AppBar.kt

此实现显示如下

Write your alt text here — **图 3.** 居中对齐的顶部应用程序栏。

中

中型顶部应用程序栏将标题放在任何其他图标下方。要创建一个，请使用 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)
    }
}AppBar.kt

此实现显示如下，演示了 enterAlwaysScrollBehavior() 的滚动行为是如何出现的

图 4. 居中对齐的顶部应用程序栏。

大

大型顶部应用程序栏类似于中型，只是标题和图标之间的填充更大，并且在屏幕上占用的空间更大。要创建一个，请使用 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)
    }
}AppBar.kt

此实现显示如下

A screen in an app with a bottom app bar that holds for action icons on the left side, and a floating action button on the right. — **图 5.** 大型顶部应用程序栏的示例实现。

底部应用程序栏

要创建一个底部应用程序栏，请使用 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."
        )
    }
}AppBar.kt

此实现显示如下

应用栏

顶部应用程序栏

API 表面

滚动行为

示例

小

居中对齐

中

大

底部应用程序栏

其他资源