Material 3中使用Scaffold时如何自定义TopAppBar高度

如果官方提供的 Small/Medium/Large TopAppBar 高度都不符合需求，有两种可靠的方式实现自定义高度：

方法一：修改官方 TopAppBar 的高度 #

直接通过 Modifier.height() 强制设置自定义高度，同时调整内部元素的对齐方式和内边距，避免内容错位：

val scrollBehaviour = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
        TopAppBar(
            title = {
                Text(
                    text = "About",
                    modifier = Modifier
                        .padding(start = 30.dp)
                        .align(Alignment.CenterVertically),
                    color = colorResource(id = R.color.black)
                )
            },
            colors = TopAppBarDefaults.smallTopAppBarColors(
                containerColor = Color.Red,
                titleContentColor = Color.Black,
            ),
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp), // 自定义目标高度
            navigationIcon = {
                Button(
                    onClick = { },
                    modifier = Modifier.align(Alignment.CenterVertically)
                ) {
                    Text(text = "B1")
                }
            }, 
            actions = {
                Button(
                    onClick = {},
                    modifier = Modifier.align(Alignment.CenterVertically)
                ) {
                    Text(text = "B2")
                }
            },
            scrollBehavior = scrollBehaviour
        )
    },
    content = { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            // 你的页面内容
        }
    }
)

注意：这种方式可能会打破 Material Design 规范，需要手动调整内部元素的布局参数，确保视觉协调。

方法二：完全自定义顶部栏（推荐） #

放弃官方 TopAppBar 组件，用 Row 实现完全自定义的顶部栏，自由度更高：

val scrollBehaviour = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
    modifier = Modifier.fillMaxSize(),
    topBar = {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(48.dp) // 自定义高度
                .background(Color.Red)
                .nestedScroll(scrollBehaviour.nestedScrollConnection), // 保留滚动行为（可选）
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            // 左侧导航按钮
            Button(onClick = { }) {
                Text(text = "B1")
            }
            // 标题
            Text(
                text = "About",
                color = colorResource(id = R.color.black),
                modifier = Modifier.padding(start = 30.dp)
            )
            // 右侧操作按钮
            Button(onClick = {}) {
                Text(text = "B2")
            }
        }
    },
    content = { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            // 你的页面内容
        }
    }
)

这种方式的优势：

• 完全控制高度和内部布局
• 可自由调整元素间距、对齐方式
• 保留 Scaffold 的内边距逻辑，避免内容被遮挡

内容的提问来源于stack exchange，提问作者Nik