Compose Material3实现Edge to Edge时部分设备系统导航栏变暗问题

我尝试使用Compose Material3实现Edge to Edge效果，但部分设备的系统导航栏出现颜色变暗的情况。

可组合主题代码 #

@Composable
fun AppTheme(
    systemUiController: SystemUiController = rememberSystemUiController(),
    useDarkColors: Boolean = isSystemInDarkTheme(),
    enableDynamicColors: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        enableDynamicColors && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S ->
            if (useDarkColors) dynamicDarkColorScheme(LocalContext.current)
            else dynamicLightColorScheme(LocalContext.current)

        useDarkColors ->
            darkColorScheme()

        else ->
            lightColorScheme()
    }

    DisposableEffect(key1 = Unit) {
        systemUiController.setSystemBarsColor(
            color = Color.Transparent,
            darkIcons = colorScheme.background.luminance() > 0.5
        )

        onDispose { }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(),
        shapes = Shapes(),
        content = content
    )
}

注：SystemUiController来自Accompanist System UI Controller库。

themes.xml配置 #

<style name="AppTheme" parent="android:Theme.Material.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:navigationBarColor">@android:color/transparent</item>
</style>

主可组合内容代码 #

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()

            AppTheme {
                Scaffold(
                    modifier = Modifier
                        .fillMaxSize()
                        .nestedScroll(connection = scrollBehavior.nestedScrollConnection),
                    topBar = {
                        CenterAlignedTopAppBar(
                            modifier = Modifier.fillMaxWidth(),
                            title = { Text(text = "App Bar") },
                            scrollBehavior = scrollBehavior
                        )
                    },
                    bottomBar = {
                        NavigationBar(modifier = Modifier.fillMaxWidth()) {
                            repeat(times = 3) { index ->
                                NavigationBarItem(
                                    selected = index == 0,
                                    onClick = { },
                                    icon = {
                                        Icon(
                                            imageVector = Icons.Default.Home,
                                            contentDescription = null
                                        )
                                    },
                                    label = { Text(text = "Item $index") }
                                )
                            }
                        }
                    },
                    contentWindowInsets = WindowInsets.systemBars
                ) { contentPadding ->
                    LazyColumn(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(paddingValues = contentPadding),
                        contentPadding = PaddingValues(all = 16.dp),
                        verticalArrangement = Arrangement.spacedBy(space = 16.dp)
                    ) {
                        items(count = 50) { index ->
                            Text(text = "Item $index")
                        }
                    }
                }
            }
        }
    }
}

问题现象与期望 #

• 现象：当使用NavigationBar时，系统导航栏虽设为透明，却因NavigationBar产生变暗叠加效果；移除NavigationBar则恢复正常，跟随背景颜色。该问题仅在部分设备出现：Android 12物理设备仅浅色主题下出现，Android 13模拟器则无论主题均出现。
• 期望效果：如Gmail应用所示，系统导航栏与NavigationBar颜色保持一致，而非出现变暗叠加效果。

效果对比 #

问题效果图：
正常效果图：
期望效果图：

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