CenterAlignedTopAppBar

代码取值 now in android,自定义封装顶部导航栏代码学习。

CenterAlignedTopAppBar(
    title = { Text(text = stringResource(id = titleRes)) },
    navigationIcon = {
        IconButton(onClick = onNavigationClick) {
            Icon(
                imageVector = navigationIcon,
                contentDescription = navigationIconContentDescription,
                tint = MaterialTheme.colorScheme.onSurface,
            )
        }
    },
    actions = {
        IconButton(onClick = onActionClick) {
            Icon(
                imageVector = actionIcon,
                contentDescription = actionIconContentDescription,
                tint = MaterialTheme.colorScheme.onSurface,
            )
        }
    },
    colors = colors,
    modifier = modifier.testTag("niaTopAppBar"),
)

介绍

CenterAlignedTopAppBar 是 Jetpack Compose 中的一个组件，位于 Material3 库中，主要用于实现应用顶部栏 (App Bar)，并且它将标题居中显示。它是 TopAppBar 的一种变体，与传统的顶部栏不同，传统的顶部栏通常将标题居左或居中，这个组件通过 CenterAligned 对齐标题和其他元素，使得其在设计上更加灵活。

1. CenterAlignedTopAppBar 的作用

CenterAlignedTopAppBar 用于创建一个 居中对齐的顶部应用栏，通常包括：

• 一个可选的导航图标（例如返回按钮或菜单按钮）

• 一个居中显示的标题

• 可选的操作按钮（例如设置、搜索按钮等）

这个组件主要用于在现代的 Material Design 3 风格中实现顶部栏，它自动处理了一些常见的布局和对齐问题，简化了开发者的工作。

2. CenterAlignedTopAppBar 的常见用法

CenterAlignedTopAppBar(
    title = { Text(text = "App Title") },  // 标题内容
    navigationIcon = {
        IconButton(onClick = { /* 处理点击事件 */ }) {
            Icon(Icons.Default.Menu, contentDescription = "Navigation icon")  // 导航图标
        }
    },
    actions = {
        IconButton(onClick = { /* 处理点击事件 */ }) {
            Icon(Icons.Default.Settings, contentDescription = "Action icon")  // 操作按钮
        }
    },
    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(),  // 配置颜色
    modifier = Modifier.fillMaxWidth()  // 其他修改器
)

• title：设置标题内容。它是一个 @Composable 函数，可以在这里传入任何可以渲染的 Composable，例如 Text、Icon 等。

• navigationIcon：可选的导航图标（例如返回按钮或菜单按钮）。如果不需要导航图标，可以传入 null 或省略此项。

• actions：可选的操作按钮。比如常见的搜索、设置按钮等。

• colors：可以用 TopAppBarDefaults.centerAlignedTopAppBarColors() 设置主题颜色。

• modifier：自定义布局的修改器，如填充宽度等。

3. CenterAlignedTopAppBar 参数说明

• title: 定义在顶部栏中显示的标题。

• navigationIcon: 定义左侧的导航图标，通常是返回按钮或菜单按钮。

• actions: 定义顶部栏右侧的操作按钮（例如搜索、设置等）。

• colors: 用于定制 TopAppBar 的颜色，如背景色、标题颜色等。

• modifier: 用于修改 TopAppBar 的大小、对齐、边距等属性。

4. 测试代码示例

下面是一个简单的 Jetpack Compose 应用，使用 CenterAlignedTopAppBar 创建顶部应用栏，并为导航和操作按钮分别设置点击事件。

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Settings
import androidx.compose.ui.res.stringResource

@Composable
fun TopAppBarExample() {
    // 使用 CenterAlignedTopAppBar 组件
    CenterAlignedTopAppBar(
        title = { 
            Text(text = "My App", color = Color.White)  // 居中显示的标题
        },
        navigationIcon = {
            IconButton(onClick = { /* 处理导航按钮点击 */ }) {
                Icon(Icons.Filled.Menu, contentDescription = "Navigation Icon", tint = Color.White)
            }
        },
        actions = {
            IconButton(onClick = { /* 处理操作按钮点击 */ }) {
                Icon(Icons.Filled.Settings, contentDescription = "Settings", tint = Color.White)
            }
        },
        colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
            containerColor = Color.Blue,  // 设置顶部栏的背景颜色
            titleContentColor = Color.White  // 设置标题的文字颜色
        ),
        modifier = Modifier.fillMaxWidth()  // 使顶部栏填充整个宽度
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewTopAppBar() {
    // 用 Preview 显示顶部栏
    MaterialTheme {
        TopAppBarExample()
    }
}

5. 代码解析

• 标题：使用 Text 组件显示标题 "My App"。标题颜色为白色（Color.White）。

• 导航图标：使用 IconButton 和 Icon 显示一个菜单图标（Menu），点击事件为一个空的 Lambda（可以根据需求添加逻辑）。

• 操作图标：使用 IconButton 和 Icon 显示一个设置图标（Settings），同样提供一个空的点击事件。

• colors：使用 TopAppBarDefaults.centerAlignedTopAppBarColors 配置顶部栏的背景色为蓝色，标题颜色为白色。

• modifier：使用 Modifier.fillMaxWidth() 将 TopAppBar 设置为充满屏幕宽度。

6. 总结

• CenterAlignedTopAppBar 是 Material3 中用于创建居中对齐标题的顶部应用栏组件。它支持自定义标题、导航图标、操作按钮以及颜色等属性。

• 使用 CenterAlignedTopAppBar 可以简化顶部栏的实现，确保内容的对齐和样式统一。

• 可以通过 Modifier、TopAppBarColors 等参数进一步自定义顶部栏的外观。

注意，如果使用这个组件设置顶部导航栏，需要自己计算他的高度。

再一个页面中设置顶部导航栏之后，下面需要设置内容区域。防止堆叠。