Jetpack Compose中如何实现可注册为NavHost路由的自定义透明背景弹窗

你遇到的黑色区域问题根因是：常规NavHost目的地默认会用主题背景色填充未被内容覆盖的区域，且默认页面切换动画会完全隐藏底层页面，才会出现侧边黑色的情况。可以按照以下步骤实现完全自定义的路由弹窗：

1. 改造弹窗组件根布局 #

首先让弹窗的根布局铺满全屏，主动设置侧边区域的透明/半透明背景，同时添加基础的交互逻辑：

@Composable
fun ThePopupDialog(navController: NavController) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            // 按需调整侧边遮罩的颜色和透明度，完全透明可将alpha设为0
            .background(Color.Black.copy(alpha = 0.5f))
            // 点击遮罩区域关闭弹窗
            .clickable { navController.popBackStack() }
    ) {
        // 实际弹窗内容区域，可自定义大小、位置、样式
        Box(
            modifier = Modifier
                .align(Alignment.Center)
                .size(260.dp, 180.dp)
                .background(Color.White, RoundedCornerShape(16.dp))
                // 拦截内容区域点击，避免触发外层关闭逻辑
                .clickable(
                    indication = null,
                    interactionSource = remember { MutableInteractionSource() }
                ) {}
        ) {
            Text(
                text = "弹窗内容",
                modifier = Modifier.align(Alignment.Center)
            )
        }
    }
}

2. 配置带自定义动画的导航 #

使用带动画支持的NavHost，配置弹窗路由的过渡效果，保证底层页面在弹窗显示时保持可见：

Compose 1.6及以上版本官方已内置动画导航能力，更低版本可使用Accompanist Navigation Animation库，API用法一致。

override fun onCreate(savedState: Bundle?) {
    val navController = rememberAnimatedNavController()
    AnimatedNavHost(
        navController = navController,
        startDestination = "main_page"
    ) {
        composable(route = "main_page") {
            MainPage(navController = navController)
        }
        composable(
            route = "my_popup",
            // 自定义弹窗入场动画：淡入，可替换为缩放、滑入等任意动画
            enterTransition = { fadeIn(animationSpec = tween(250)) },
            // 自定义弹窗退场动画：淡出
            exitTransition = { fadeOut(animationSpec = tween(250)) },
            // 底层页面在弹窗显示/关闭时保持不动，不执行退场动画
            popEnterTransition = { null },
            popExitTransition = { null }
        ) {
            ThePopupDialog(navController = navController)
        }
    }
}

3. 可选拓展配置 #

• 如需自定义弹窗的入场动画，可直接修改enterTransition参数，支持组合平移、缩放、透明度等多种动画效果
• 如需让透明区域延伸到系统状态栏/导航栏，可配合系统UI控制器调整状态栏、导航栏的颜色和透明属性
• 可自行添加手势滑动关闭、弹窗圆角、阴影等自定义效果，不受系统Dialog的限制

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