如何在Android Jetpack Compose中实现导航栏完全透明？

你遇到的问题核心是Android 11+系统默认会强制导航栏保持对比度，即便设置了透明色，系统也会自动添加一层半透明遮罩，再加上部分UI标志未正确配置，导致导航栏无法完全透明。以下是修复方案：

关键修复点 #

• 关闭Android 11+的导航栏强制对比度
• 补充设置系统UI布局标志，确保内容可以延伸到导航栏下方
• 结合原生Window设置与Accompanist配置（或直接用原生设置）

修改后的完整代码 #

import android.os.Bundle
import android.view.View
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.core.view.WindowCompat
import com.google.accompanist.systemuicontroller.rememberSystemUiController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        // 让UI延伸到系统栏区域
        WindowCompat.setDecorFitsSystemWindows(window, false)
        
        // 关键：关闭Android 11+的导航栏强制对比度
        if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.R) {
            window.isNavigationBarContrastEnforced = false
        }
        
        // 设置导航栏透明，并添加布局标志
        window.navigationBarColor = android.graphics.Color.TRANSPARENT
        window.decorView.systemUiVisibility = window.decorView.systemUiVisibility or 
                View.SYSTEM_UI_FLAG_LAYOUT_STABLE or 
                View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

        setContent {
            YourProjectNameTheme {
                val systemUiController = rememberSystemUiController()

                SideEffect {
                    // 保持状态栏透明
                    systemUiController.setStatusBarColor(color = Color.Transparent)
                    // 设置导航栏透明（可省略，已通过原生代码配置）
                    systemUiController.setNavigationBarColor(color = Color.Transparent)
                }

                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    LazyColumn(
                        modifier = Modifier.fillMaxSize()
                        // 若需内容不被导航栏遮挡则保留该padding；若要内容完全覆盖则移除
                        // .navigationBarsPadding()
                    ) {
                        items(count = 4) {
                            Image(
                                painter = painterResource(id = R.drawable.squirrel),
                                contentDescription = "Squirrel",
                                contentScale = ContentScale.FillWidth,
                                modifier = Modifier.fillMaxWidth()
                            )
                        }
                    }
                }
            }
        }
    }
}

额外说明 #

• 若不需要内容被导航栏遮挡，保留.navigationBarsPadding()；若希望图片完全延伸到导航栏下方，移除该修饰符
• Accompanist的setNavigationBarColor在透明场景下可能被系统强制对比度覆盖，配合原生Window设置更可靠
• Android 10及以下系统无需设置isNavigationBarContrastEnforced

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