Jetpack Compose中实现状态栏颜色与内容背景渐变匹配

要实现状态栏颜色与TopAppBar的渐变背景无缝衔接，只需两步操作：

1. 将状态栏设置为透明 #

修改状态栏颜色代码，把固定颜色改为透明，同时根据渐变色调调整状态栏图标明暗，确保可读性：

val systemUiController = rememberSystemUiController()
SideEffect {
    systemUiController.setStatusBarColor(
        color = Color.Transparent, // 状态栏透明，让下方渐变背景透出
        darkIcons = false // 若渐变偏深色，设为false显示白色图标；若偏浅色则设为true显示黑色图标
    )
}

2. 让TopAppBar的渐变背景延伸至状态栏 #

调整TopAppBar的内边距设置，取消默认的状态栏避让，同时给内部内容添加状态栏内边距避免遮挡：

@Composable
fun ProminentTopAppBarWithImage() {
    TopAppBar(
        modifier = Modifier.height(200.dp),
        contentPadding = PaddingValues(all = 0.dp),
        windowInsets = WindowInsets.none // 取消默认状态栏内边距，允许背景延伸至状态栏区域
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(SaveDoneBackGroundGradient)
                .statusBarsPadding() // 给内部内容添加状态栏高度的内边距，避免内容被遮挡
        ) {
            Row(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 4.dp)
            ) {
                /*...*/
            }
        }
    }
}

设置完成后，状态栏会完全透出TopAppBar的渐变背景，实现视觉上的无缝匹配。

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