Jetpack Compose中TopAppBar无法设置背景色（无backgroundColor属性）

数据老陈

2026-7-21

Jetpack Compose 修改TopAppBar背景色的正确方法

问题出在你使用的Jetpack Compose版本（Material 2 vs Material 3）和教程不匹配，以下分两种情况给出解决方案：

如果你用的是Material 2（导入`androidx.compose.material.TopAppBar`）

这个版本的TopAppBar确实有backgroundColor参数，直接传入颜色即可：

import androidx.compose.material.TopAppBar
import androidx.compose.ui.graphics.Color

TopAppBar(
    title = { Text("我的页面") },
    backgroundColor = Color.Red, // 直接设置背景色
    elevation = 4.dp // 可选，设置阴影高度
)

如果你用的是Material 3（导入`androidx.compose.material3.TopAppBar`）

Material 3的TopAppBar移除了单独的backgroundColor参数，改用containerColor或者通过colors参数统一配置：

方法1：直接用`containerColor`参数

import androidx.compose.material3.TopAppBar
import androidx.compose.ui.graphics.Color

TopAppBar(
    title = { Text("我的页面") },
    containerColor = Color.Blue // 设置背景容器色
)

方法2：通过`colors`参数自定义更多样式

import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.ui.graphics.Color

TopAppBar(
    title = { Text("我的页面") },
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Green, // 背景色
        titleContentColor = Color.White // 标题文字颜色，可选
    )
)