Jetpack Compose Scaffold中TopAppBarColors访问及内容显示问题求助

一、修复TopAppBarColors访问问题 #

在Material3中，不同类型的顶部栏（如SmallTopAppBar、CenterAlignedTopAppBar）对应专属的颜色配置方法，直接调用TopAppBarColors构造会因API设计或版本差异导致访问异常。正确做法是使用TopAppBarDefaults提供的对应方法：

如果使用的是最常用的SmallTopAppBar，替换颜色配置代码为：

colors = TopAppBarDefaults.smallTopAppBarColors(
    containerColor = MaterialTheme.colorScheme.primary,
    titleContentColor = MaterialTheme.colorScheme.onPrimary,
    navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
    actionIconContentColor = MaterialTheme.colorScheme.onSecondary
)

同时确保导入正确的包：

import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SmallTopAppBar
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.ui.graphics.Color

若使用其他类型顶部栏（如CenterAlignedTopAppBar），对应替换为TopAppBarDefaults.centerAlignedTopAppBarColors()即可。

二、添加自定义内容到顶部栏 #

方法1：基于官方组件扩展 #

官方顶部栏提供navigationIcon、actions参数可添加自定义图标/组件，title参数也支持传入任意Composable：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyApp(content: @Composable () -> Unit) {
    MovieAppTheme {
        Scaffold(topBar = {
            SmallTopAppBar(
                title = {
                    // 自定义标题：图标+文字组合
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Icon(Icons.Filled.Movie, contentDescription = null, tint = Color.White)
                        Spacer(modifier = Modifier.width(8.dp))
                        Text(text = "Movies", color = Color.White)
                    }
                },
                navigationIcon = {
                    // 自定义左侧导航按钮
                    IconButton(onClick = { /* 处理点击逻辑 */ }) {
                        Icon(Icons.Filled.ArrowBack, contentDescription = "返回", tint = Color.White)
                    }
                },
                actions = {
                    // 自定义右侧操作按钮组
                    IconButton(onClick = { /* 处理搜索逻辑 */ }) {
                        Icon(Icons.Filled.Search, contentDescription = "搜索", tint = Color.White)
                    }
                },
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primary,
                    titleContentColor = MaterialTheme.colorScheme.onPrimary,
                    navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
                    actionIconContentColor = MaterialTheme.colorScheme.onSecondary
                )
            )
        }) { paddingValues ->
            // 给内容添加内边距，避免被顶部栏遮挡
            Box(modifier = Modifier.padding(paddingValues)) {
                content()
            }
        }
    }
}

方法2：完全自定义顶部栏 #

如果官方组件的结构无法满足需求，可直接用基础布局组件（如Row、Box）实现自定义顶部栏，再传入Scaffold的topBar参数：

@Composable
fun MyApp(content: @Composable () -> Unit) {
    MovieAppTheme {
        Scaffold(topBar = {
            // 自定义顶部栏布局
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp) // 匹配SmallTopAppBar默认高度
                    .background(MaterialTheme.colorScheme.primary),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                // 左侧自定义内容
                IconButton(onClick = { /* 处理菜单逻辑 */ }) {
                    Icon(Icons.Filled.Menu, contentDescription = "菜单", tint = Color.White)
                }
                // 中间自定义标题
                Text(text = "自定义电影栏", color = Color.White, style = MaterialTheme.typography.titleLarge)
                // 右侧自定义操作组
                Row {
                    IconButton(onClick = { /* 处理收藏逻辑 */ }) {
                        Icon(Icons.Filled.Favorite, contentDescription = "收藏", tint = Color.White)
                    }
                    IconButton(onClick = { /* 处理设置逻辑 */ }) {
                        Icon(Icons.Filled.Settings, contentDescription = "设置", tint = Color.White)
                    }
                }
            }
        }) { paddingValues ->
            Box(modifier = Modifier.padding(paddingValues)) {
                content()
            }
        }
    }
}

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