Jetpack Compose：如何缩小Material3 TopAppBar的高度？

Material3 的 SmallTopAppBar 默认高度为 64dp，比 Material2 的 56dp 更高。你之前尝试的 windowInsets 仅控制组件与系统栏的间距，无法改变自身高度；直接设置 modifier.height(56.dp) 会因内部默认垂直内边距导致内容错位。以下是两种可行解决办法：

方案一：调整官方组件的内容内边距 #

通过修改 contentPadding 消除内部垂直间距，配合固定高度让内容居中：

SmallTopAppBar(
    title = { Text("页面标题") },
    navigationIcon = {
        IconButton(onClick = { /* 返回逻辑 */ }) {
            Icon(Icons.Default.ArrowBack, contentDescription = "返回")
        }
    },
    actions = {
        IconButton(onClick = { /* 搜索逻辑 */ }) {
            Icon(Icons.Default.Search, contentDescription = "搜索")
        }
    },
    modifier = Modifier.height(56.dp),
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp),
    windowInsets = WindowInsets(0.dp)
)

方案二：完全自定义 TopAppBar 布局 #

如果官方组件的内部逻辑限制过多，直接用 Row 实现自定义布局，完全掌控高度和内容位置：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(56.dp)
        .background(MaterialTheme.colorScheme.primary)
        .padding(horizontal = 16.dp),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    // 左侧导航图标
    IconButton(onClick = { /* 返回逻辑 */ }) {
        Icon(
            Icons.Default.ArrowBack,
            contentDescription = "返回",
            tint = MaterialTheme.colorScheme.onPrimary
        )
    }
    // 标题文本
    Text(
        text = "页面标题",
        style = MaterialTheme.typography.titleLarge,
        color = MaterialTheme.colorScheme.onPrimary
    )
    // 右侧操作图标
    IconButton(onClick = { /* 搜索逻辑 */ }) {
        Icon(
            Icons.Default.Search,
            contentDescription = "搜索",
            tint = MaterialTheme.colorScheme.onPrimary
        )
    }
}

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