使用safeDrawingPadding时如何使状态栏颜色与TopAppBar一致？

方案步骤： #

1. 移除Scaffold的safeDrawingPadding()修饰符
   该修饰符会为内容添加刘海区域的空白，但不会让TopAppBar延伸至该区域，从而导致白色间隙。

2. 用Compose的SystemUiController控制状态栏颜色
   在PaymentScreen中获取SystemUiController，将状态栏背景色设置为MaterialTheme.colors.primary，同时将状态栏图标设为浅色（匹配TopAppBar的白色文字）。

3. 配置TopAppBar的windowInsets参数
   让TopAppBar自动延伸到状态栏区域，直接填充刘海空间。

修改后的代码示例： #

PaymentScreen代码调整： #

import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalSystemUiController
import androidx.compose.ui.unit.dp
import androidx.core.view.WindowCompat
import androidx.activity.ComponentActivity

@Composable
fun PaymentScreen(
    tableNumber: String,
    onPaymentProceed: (amount: Double, tipAmount: Double) -> Unit,
    onBackClick: () -> Unit
) {
    val systemUiController = LocalSystemUiController.current
    val colors = MaterialTheme.colors

    // 设置状态栏颜色与TopAppBar一致，图标为浅色
    SideEffect {
        systemUiController.setStatusBarColor(
            color = colors.primary,
            darkIcons = false
        )
        // 允许Compose内容延伸到系统栏下方
        WindowCompat.setDecorFitsSystemWindows((LocalContext.current as ComponentActivity).window, false)
    }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = "Pagamento") },
                navigationIcon = {
                    IconButton(onClick = onBackClick) {
                        Icon(
                            painter = painterResource(R.drawable.ic_baseline_arrow_back_ios_new_24),
                            contentDescription = "Indietro"
                        )
                    }
                },
                backgroundColor = colors.primary,
                contentColor = Color.White,
                elevation = 4.dp,
                // 让TopAppBar延伸覆盖状态栏区域
                windowInsets = WindowInsets.statusBar
            )
        }
    ) { innerPadding ->
        // 页面内容使用innerPadding避开TopAppBar区域
        Column(
            modifier = Modifier
                .padding(innerPadding)
                .fillMaxSize()
        ) {
            // ... 此处放置你的页面内容
        }
    }
}

Activity代码简化： #

可以移除原有的enableEdgeToEdge调用，因为我们已在Compose中通过SystemUiController控制状态栏：

class PaymentActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val tableNumber = intent.getStringExtra("tableNumber") ?: ""
        setContent {
            VisualPOSMobileTheme {
                PaymentScreen(tableNumber = tableNumber,
                    onPaymentProceed = { amount, tipAmount ->
                        println("Proceed Payment: Total = $amount, Tip = $tipAmount")
                    },
                    onBackClick = { finish() })
            }
        }
    }
}

原理说明： #

• SystemUiController直接操控系统状态栏颜色，确保和TopAppBar的primary色完全匹配。
• TopAppBar的windowInsets = WindowInsets.statusBar配置，让TopAppBar占据状态栏的空间，直接填充刘海区域，消除白色间隙。
• WindowCompat.setDecorFitsSystemWindows(..., false)允许Compose内容延伸到系统栏下方，配合TopAppBar的设置完成全屏区域的颜色统一。

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