Jetpack Compose中实现半透明TopAppBar并显示后方内容

问题原因 #

默认TopAppBar自带elevation阴影效果，即便设置了半透明背景，阴影会干扰视觉效果，让TopBar看起来不透明；此外部分主题配置可能会强制覆盖TopAppBar的背景色。

修复方案 #

1. 移除TopAppBar阴影 #

设置elevation = 0.dp，消除阴影对透明度的干扰。

2. 正确配置半透明背景 #

使用带alpha值的颜色，同时确保主题未强制覆盖背景色。

3. 让Scaffold背景透明 #

确保Scaffold本身背景不遮挡下方内容，允许页面内容透过TopBar显示。

修改后的代码 #

Scaffold函数

fun ScaffoldCompose() {
    val navController = rememberNavController()

    Scaffold(
        backgroundColor = Color.Transparent, // 使Scaffold背景透明，允许下方内容透出
        bottomBar = {
            BottomBar(
                navController = navController,
                items = listOf(
                    BottomBarScreen.Home,
                    BottomBarScreen.Key,
                    BottomBarScreen.Chat
                )
            )
        },
        topBar = {
            TopBar()
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier.padding(innerPadding)
        ) {
            BottomNavGraph(navController = navController)
        }
    }
}

TopBar函数

@Composable
fun TopBar() {
    TopAppBar(
        title = {
            Box(
                modifier = Modifier.fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = "Room 611",
                    fontSize = 20.sp,
                    maxLines = 1
                )
            }
        },
        backgroundColor = Color.Black.copy(alpha = 0.1f), // 可替换为你需要的半透明颜色
        elevation = 0.dp, // 关键：移除阴影，保证透明度正常显示
        navigationIcon = {
            IconButton(onClick = {}) {
                Icon(
                    Icons.Default.Menu, "Menu",
                    modifier = Modifier.size(34.dp)
                )
            }
        },
        actions = {
            IconButton(onClick = {}) {
                Row() {
                    Icon(
                        modifier = Modifier.size(29.dp),
                        painter = painterResource(id = R.drawable.weather_icon),
                        contentDescription = "Navigation Icon",
                        tint = Color.White,
                    )
                    Spacer(Modifier.width(4.dp))
                    Text(
                        text = "13°C",
                        fontSize = 22.sp,
                        color = Color.White
                    )
                }
            }
        },
        contentColor = Color.White,
    )
}

额外提示 #

若使用Material3版本的TopAppBar，需通过colors参数配置背景色：

TopAppBar(
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Black.copy(alpha = 0.1f)
    ),
    elevation = TopAppBarDefaults.topAppBarElevation(0.dp),
    // 其他配置项
)

同时确保BottomNavGraph中的页面有非透明背景，这样TopBar的半透明效果才会更明显。

内容的提问来源于stack exchange，提问作者Ignis Divine