Small 类型 TopAppBar
AppBar 主要由2类，顶部 AppBar 和底部 AppBar。
- 顶部 AppBar：主要包含了标题，action菜单，导航菜单。
- 底部 AppBar：典型地包含主要导航项。
顶部 AppBar
顶部 AppBar 包含了 4 中类型： TopAppBar CenterAlignedTopAppBar MediumTopAppBar LargeTopAppBar
下面会逐个介绍 AppBar 的类型及给出示例。
TopAppBar
TopAppBar 是一个重要的组件，它提供了 Material Design 3 标准的顶部应用栏实现，提供现代化的外观和交互方式。TopAppBar 不仅具有直观且易用的 API，还支持高度定制，使得开发者能够轻松构建符合 Material Design 准则的应用界面。它通常包含应用的标题、导航图标、操作按钮等元素，为用户提供直观且一致的操作体验。
TopAppBar 特点
- 高度可定制：开发者可以通过各种参数来定制
TopAppBar的外观和行为，包括颜色、标题、导航图标、操作按钮等。 - 响应式布局：
TopAppBar支持不同的屏幕尺寸和方向，能够自动调整布局以适应不同的设备。 - 易集成：
TopAppBar与其他 Compose 组件和布局可以无缝集成，使得 UI 构建更加灵活和高效。
TopAppBar 声明及参数
下面是 TopAppBar 的声明。
@Composable
fun TopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
): Unit
参数列表
| 参数名 | 类型 | 描述 |
|---|---|---|
| title | @Composable () -> Unit | 是应用栏的标题部分，通常显示页面相关的标题。它是一个标注 @Composable 的 lambda 表达式，你可以在其中放置任何你想要作为标题显示的 UI 元素，通常是一个 Text 组件。 |
| modifier | Modifier | 用于更改或增强 TopAppBar 的行为。例如，你可以使用 Modifier.height() 来设置应用栏的高度。 |
| navigationIcon | @Composable () -> Unit | 是一个可选的导航图标，通常用于显示一个返回按钮或菜单图标。和 title 一样，这也是一个标注 @Composable 的 lambda 表达式。 |
| actions | @Composable RowScope.() -> Unit | 用于在应用栏的右侧放置操作按钮或图标。开发者可以在这里添加多个按钮，它们将水平排列（因为 RowScope 表示一个水平行布局的范围）。 |
| windowInsets | WindowInsets | 定义了应用栏如何处理窗口插入，如状态栏、导航栏等。 |
| colors | TopAppBarColors | 用于定义应用栏的颜色方案。TopAppBarColors 是一个包含多个颜色属性的对象，如背景色、标题色等。TopAppBarDefaults.topAppBarColors() 提供了默认的颜色设置。 |
| scrollBehavior | TopAppBarScrollBehavior? | 当页面内容可以滚动时，scrollBehavior 定义了应用栏如何响应滚动事件。例如，应用栏可以在页面向下滚动时隐藏，并在页面向上滚动时重新显示。 |
下图是基本的 TopAppBar 效果图及说明。
TopAppBar 示例
下面是一个具体的示例代码及运行结果图。
@Composable
fun MyTopAppBar() {
TopAppBar(
// 标题内容
title = { Text("我的应用") },
// 导航图标
navigationIcon = {
IconButton(onClick = { /* 处理导航图标点击事件 */ }) {
Icon(Icons.Default.Menu, contentDescription = "导航菜单")
}
},
// 动作图标
actions = {
// 添加动作按钮
IconButton(onClick = { /* 处理动作1点击事件 */ }) {
Icon(Icons.Default.Favorite, contentDescription = "收藏")
}
IconButton(onClick = { /* 处理动作2点击事件 */ }) {
Icon(Icons.Default.Search, contentDescription = "搜索")
}
},
// 各项颜色配置
colors = TopAppBarDefaults.topAppBarColors(
containerColor = ButterflyBlue, // appbar 容器颜色
actionIconContentColor = Purple40, // 动作图标内颜色
titleContentColor = Color.Magenta, // 标题（参数 title 表示的 composable）颜色
navigationIconContentColor = OrangeA700 // 导航图标内容颜色
)
)
}
CenterAlignedTopAppBar
居中对齐顶部应用栏与 TopAppBar 基本一样，不同之处就在于它的标题默认居中放置。
CenterAlignedTopAppBar 的特点
- 居中对齐的标题：
CenterAlignedTopAppBar的最大特点就是将标题文本居中放置在AppBar的中央，与传统的左对齐方式不同。这种设计可以让 AppBar 更加突出标题，特别是在标题较长或需要强调时。 - 适应性强：
CenterAlignedTopAppBar能够根据不同的屏幕尺寸和方向自动调整其布局，确保UI在不同设备上的表现都是一致的。 - 可定制性：开发者可以通过修改属性来定制
CenterAlignedTopAppBar的外观和行为，例如修改标题文本、背景颜色、导航图标等。
CenterAlignedTopAppBar 声明及参数
CenterAlignedTopAppBar 的声明如下。
@Composable
fun CenterAlignedTopAppBar(
title: @Composable () -> Unit,
modifier: Modifier = Modifier,
navigationIcon: @Composable () -> Unit = {},
actions: @Composable RowScope.() -> Unit = {},
windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
colors: TopAppBarColors = TopAppBarDefaults.centerAlignedTopAppBarColors(),
scrollBehavior: TopAppBarScrollBehavior? = null
): Unit
可以发现，除了名称不同，参数的默认给出不同外，声明中的参数个数及参数名与 TopAppBar 一致。两者都属于 Small 类型的 AppBar。
因此此组件的参数说明表不再给出，直接参考 TopAppBar 的参数说明表格即可。
CenterAlignedTopAppBar 示例
因为 CenterAlignedTopAppBar 的定义包括界面 UI 与 TopAppBar 高度一致，因此下面从影响 AppBar 滚动的角度来给出示例。通过修改 scrollBehavior 的值与运行效果图查看 scrollBehavior 值产生的不同结果。
@Composable
fun CenterAlignedTopAppBarAndScrollBehaviorSample() {
// 记住滚动状态，另外的 2 个方法：exitUntilCollapsedScrollBehavior()，pinnedScrollBehavior() 。
val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()
Scaffold(
topBar = {
CenterAlignedTopAppBar(
modifier=Modifier.border(width = 1.dp, color= Color.Gray),
title = { Text("AppBar 滚动行为 enterAlwaysScroll") },
scrollBehavior = scrollBehavior,
)
},
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
) { innerPadding ->
// 实际的滚动内容
LazyColumn(
contentPadding = innerPadding,
modifier = Modifier.fillMaxSize(),
) {
items(100) { index ->
ListItem(
headlineContent = { Text("Item $index") },
leadingContent = {
Icon(
imageVector = Icons.Default.Settings,
contentDescription = "Localized description"
)
}
)
HorizontalDivider(thickness = 3.dp, color = Color.Red)
}
}
}
}
从上述 3 个运行结果图，总结出 scrollBehavior 的值导致运行后 AppBar 在内容滚动时的不同表现。
enterAlwaysScrollBehavior()：当页面内容向下滚动时，TopAppBar 会随着滚动而逐渐出现或保持在屏幕顶部。当页面内容向上滚动时，TopAppBar 会逐渐滑出屏幕，但一旦开始向下滚动，它就会立即开始重新出现。exitUntilCollapsedScrollBehavior()：当页面内容向下滚动时，TopAppBar 会保持在屏幕顶部，直到一个特定的偏移量（通常是与 TopAppBar 高度相等的折叠距离）被达到，之后它会随着内容继续向下滚动而逐渐滑出屏幕。当内容向上滚动时，TopAppBar 会保持隐藏，直到内容滚动回到那个特定的偏移量，然后它会随着内容的滚动而逐渐滑入屏幕。pinnedScrollBehavior()：无论页面内容如何滚动，TopAppBar 都会固定在屏幕顶部，不会随着滚动而移动。
CenterAlignedTopAppBar与TopAppBar的对比
CenterAlignedTopAppBar和TopAppBar都是Jetpack Compose中用于创建顶部应用栏的组件，但它们有一些异同点：
- 标题对齐方式：
TopAppBar的标题默认是左对齐的，而CenterAlignedTopAppBar则是将标题居中对齐。这是两者之间最显著的区别。 - 功能与使用：除了标题对齐方式不同外，两者在其他功能和使用上基本相似。它们都可以设置导航图标、操作项、背景颜色等，并且可以与其他Compose组件协同工作。
- 适用场景：
TopAppBar适用于大多数情况，特别是当标题较短或不需要特别强调时。而CenterAlignedTopAppBar则更适合在标题较长或需要突出标题时使用。
TopAppBar 是 Jetpack Compose Material3 库中一个重要的组件，它提供了实现 Material Design 3 顶部应用栏的便捷方式。通过合理使用 TopAppBar，开发者可以构建出符合 Material Design 准则、用户体验良好的 Android 应用界面。随着 Jetpack Compose 的不断发展和完善，TopAppBar 将在未来的 Android 应用开发中发挥更加重要的作用。
