Jetpack Compose中跳转显示Bottom Sheet时如何设置背景透明？

问题原因 #

你遇到的透明背景不生效问题，本质是默认Jetpack Navigation的页面容器和跳转动画默认带不透明配置，哪怕你给LoginScreen内容设置了透明，底层的导航容器和过渡动画还是会把首页遮挡。

解决步骤 #

1. 给NavHost设置透明背景 #

找到你定义NavHost的位置，给Modifier添加透明背景配置，示例如下：

NavHost(
    navController = navController,
    startDestination = HomeDestination.route(),
    // 核心配置：给导航根容器设置透明背景
    modifier = Modifier.fillMaxSize().background(Color.Transparent)
) {
    // 首页配置
    composable(HomeDestination.route()) {
        HomeScreen()
    }
    // 登录页配置，取消默认跳转动画
    composable(
        route = LoginDestination.route(),
        // 所有过渡动画都设为0时长的淡入淡出，避免过渡效果遮挡前页
        enterTransition = { fadeIn(animationSpec = tween(0)) },
        exitTransition = { fadeOut(animationSpec = tween(0)) },
        popEnterTransition = { fadeIn(animationSpec = tween(0)) },
        popExitTransition = { fadeOut(animationSpec = tween(0)) }
    ) {
        LoginScreen()
    }
}

如果你用的是Accompanist的AnimatedNavHost，配置逻辑完全一致。

2. 调整登录页跳转参数 #

修改HomeScreen中点击按钮跳转登录的逻辑，添加导航配置避免清除首页栈：

Button(onClick = {
    viewModel.navigate(
        LoginDestination.route()
    ) {
        launchSingleTop = true
        // 不要把首页从返回栈中移除
        popUpTo(HomeDestination.route()) {
            saveState = true
        }
        restoreState = true
    }
}) {
    Text("Go to the login screen")
}

3. 兼容特殊场景配置 #

如果做完上述配置还有白色背景，补充以下配置：

• 如果你使用的是Material 3的BottomSheetScaffold，将原来的backgroundColor参数替换为containerColor = Color.Transparent，Material3中该参数名称已变更
• 在承载整个应用的Activity的onCreate方法中，添加Window透明背景配置：

  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      window.setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
      setContent {
          // 原有应用主题、NavHost逻辑不变
      }
  }
  

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