Jetpack Compose 中透明的 TopAppBar 及其背后的可见内容

Question

我想做一个半透明的TopBar，如图所示

我试图将透明度直接添加到

backgroundColor

属性。试过用

Unspecified

来表示颜色，但这也不行，试过找类似的资料，但都不是我需要的。如果有人能告诉我如何做到这一点，我将不胜感激。

这里是

Scaffold

乐趣

fun ScaffoldCompose() {
    val navController = rememberNavController()

    val configuration = LocalConfiguration.current

    val parentHeight =
    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.Transparent.copy(alpha = 0.1f),
        navigationIcon = {
            IconButton(onClick = {

            }) {
                Icon(
                    Icons.Default.Menu, "Menu",
                    modifier = Modifier.size(34.dp)
                )
            }
        },
        actions = {
            IconButton(onClick = { // synchronize weather

            }) {
                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,
    )
}