Compose UI 之 Small TopAppBar

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

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		// 导航图标内容颜色))
}

TopAppBar Sample

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)}}}
}

enterAlwaysScroll

exitUntilCollapsedScroll

pinnedScroll

从上述 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 应用开发中发挥更加重要的作用。