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

对于M3，背景颜色的默认值TopAppBar是在属性中定义TopAppBarDefaults.smallTopAppBarColors()的containerColor。默认值是surface主题中定义的颜色。

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

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

Answer 2

7 月 23 日更新 M3TopAppBarDefaults.smallTopAppBarColors()已弃用

现在需要指定颜色，因为TopAppBarDefaults.topAppBarColors不推荐使用已接受的答案。

以下是可组合函数的片段，用于创建顶部应用程序栏，其背景、标题、导航图标和操作图标采用主题颜色而不是编码颜色的自定义颜色：

@Composable
@OptIn(ExperimentalMaterial3Api::class)
private fun ToolBar(
    title: String,
    onNavigationClick: () -> Unit,
    onSettingClick: () -> Unit
) {

    TopAppBar(
        // Customize Colors here
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = MaterialTheme.colorScheme.onPrimary,
            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
            actionIconContentColor = MaterialTheme.colorScheme.onSecondary
        ),
        navigationIcon = {
            IconButton(onClick = onNavigationClick) {
                Icon(
                    imageVector = Icons.Filled.Menu,
                    contentDescription = "Navigation icon"
                )
            }
        },
        title = { Text(title) },
        actions = {
            IconButton(onClick = onSettingClick) {
                Icon(
                    Icons.Filled.Settings,
                    contentDescription = "Settings"
                )
            }
        })
}

用法：

Scaffold(
    topBar = {
        ToolBar( "Home Page", { /** handle Navigation Click */}) {
           /** handle Action Click*/
        }
    },

灯光模式

深色模式