Compose TopAppBar 没有背景色

Question

我想将 TopAppBar 添加到我的 Compose 应用程序中，因此我执行了以下操作：

@OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AlternoTubeTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Scaffold(
                        topBar = {
                            TopAppBar(
                                title = {
                                    Text(
                                        stringResource(id = R.string.app_name),
                                        maxLines = 1,
                                        overflow = TextOverflow.Ellipsis
                                    )
                                },
                            )
                        },
                        content = { innerPadding ->
                            MyAppTheme(modifier = Modifier.padding(innerPadding))
                        }
                    )
                }
            }
        }
    }

问题是，当我运行应用程序时，TopAppBar 没有颜色：

而在预览图像上，应用栏确实有颜色：

接下来我可以尝试什么来获得正确的颜色？

Answer 1

和M3TopAppBar 中背景颜色的默认值定义在TopAppBarDefaults.smallTopAppBarColors()与containerColor属性。默认值是您的主题中定义的 surface 颜色。

检查您的主题，或者您可以使用以下内容覆盖它：

TopAppBar(
    title = {
        Text(
            stringResource(id = R.string.app_name),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    },
    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = Yellow)
)