Jetpack Compose Navigation设置NavHost透明后无法透显上一级NavBackStackEntry如何解决

实现导航页透显下层回退栈页面方案 #

问题本质 #

Navigation Compose 内部会为每个导航目的地的根承载容器默认赋值主题colorBackground作为背景，该配置优先级高于NavHost外层设置的透明背景，所以仅修改外层背景无法生效。

具体实现步骤 #

1. 自定义透明背景的导航器
   替换默认的ComposeNavigator，去掉默认背景设置逻辑，使每个目的地的承载容器默认为透明：

@OptIn(ExperimentalNavigationApi::class)
class TransparentComposeNavigator : ComposeNavigator() {
    override fun createDestination() = Destination(this)

    class Destination(navigator: TransparentComposeNavigator) : ComposeNavigator.Destination(navigator) {
        override fun getContentView(context: Context): View = ComposeView(context).apply {
            setBackgroundColor(android.graphics.Color.TRANSPARENT)
        }
    }
}

如果你使用的是accompanist-navigation-animation动画导航库，对应自定义AnimatedComposeNavigator即可，修改逻辑完全一致。

2. 注册自定义导航器到导航控制器

val navController = rememberNavController()
val transparentNavigator = remember { TransparentComposeNavigator() }
LaunchedEffect(Unit) {
    navController.navigatorProvider.addNavigator(transparentNavigator)
}

3. 配置NavHost与页面背景

NavHost(
    navController = navController,
    startDestination = "home",
    // NavHost本身也设置为透明
    modifier = Modifier.fillMaxSize().background(Color.Transparent)
) {
    composable("home") {
        // 底层页面设置不透明背景
        Box(Modifier.fillMaxSize().background(Color.White)) {
            Button(onClick = { navController.navigate("transparent_page") }) {
                Text("跳转半透页面")
            }
        }
    }
    composable("transparent_page") {
        // 上层页面设置半透明背景，即可透出下层页面内容
        Box(Modifier.fillMaxSize().background(Color.Black.copy(alpha = 0.4f))) {
            Text("半透上层页面", color = Color.White, modifier = Modifier.align(Alignment.Center))
        }
    }
}

效果说明 #

该方案没有使用Overlay实现，回退栈内的上一级页面会保留在视图层级中，和透明Activity透显下层页面的逻辑完全一致，最终效果如下：

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