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沒有顏色：

而在預覽圖像上，應用欄確實有 colors：

接下來我可以嘗試什么來獲得正確的 colors？

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)
)