此页面由 Cloud Translation API 翻译。

应用栏

应用栏是一种容器，可让用户访问应用的主要功能和导航项。应用栏分为两种类型：顶部应用栏和底部应用栏。它们各自的外观和用途如下：

类型	外观	用途
顶部应用栏	横跨屏幕顶部。	提供对关键任务和信息的访问权限。通常用于托管标题、核心操作项和某些导航项。
底部应用栏	横跨屏幕底部。	通常包含核心导航项。还可以提供对其他关键操作的访问权限，例如通过所含的悬浮操作按钮。

顶部和底部应用栏示例。 — **图 1.** 顶部应用栏（左侧）和底部应用栏（右侧）。

如需实现顶部应用栏和底部应用栏，请使用 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)
    }
}AppBar.kt

此实现如下所示：

已居中对齐

居中对齐的顶部应用栏与小应用栏基本相同，但标题位于组件的中心位置要实现它，请使用专用的 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)
    }
}AppBar.kt

此实现如下所示：

中

中等顶部应用栏会将标题置于任何其他图标下方。要创建首先，使用 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

此实现如下所示：

底部应用栏

如需创建底部应用栏，请使用 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 Surface

滚动行为

示例

小

已居中对齐

中

大

底部应用栏

其他资源