如何用Jetpack Compose Navigation实现响应式UI适配导航及ViewModel作用域管理？

针对你的需求，推荐采用同一导航目标绑定两种布局形态+ViewModel作用域绑定的实现方式，既符合Navigation的设计规范，又能避免Dialog遮罩带来的问题，具体方案如下：

1. 核心思路 #

为同一个路由注册逻辑，根据屏幕尺寸类（Compact/Medium/Large）选择加载全屏页面或Dialog组件，同时通过导航回退栈条目（backStackEntry）绑定ViewModel，确保两种形态共享同一ViewModel实例，且离开该导航目标时自动清除ViewModel。

2. 具体实现步骤 #

步骤1：判断屏幕尺寸类 #

通过WindowSizeClass获取当前设备的尺寸类型，作为布局切换依据：

val windowSizeClass = calculateWindowSizeClass(LocalContext.current)
val isCompactDevice = windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact

步骤2：配置导航目标 #

在NavHost中，针对同一路由，根据尺寸类渲染不同布局：

NavHost(navController = navController, startDestination = "home") {
    // 其他导航目标...
    composable("target_screen") { backStackEntry ->
        // 绑定当前导航目标的ViewModel，离开时自动销毁
        val viewModel = hiltViewModel<TargetViewModel>(backStackEntry)
        
        if (isCompactDevice) {
            // 紧凑屏：全屏展示
            FullScreenTargetContent(viewModel, onBack = { navController.popBackStack() })
        } else {
            // 大屏：对话框展示
            Dialog(
                onDismissRequest = { navController.popBackStack() },
                properties = DialogProperties(
                    // 大屏保留遮罩，紧凑屏完全移除
                    dimAmount = if (isCompactDevice) 0f else 0.5f
                )
            ) {
                DialogTargetContent(viewModel)
            }
        }
    }
}

步骤3：复用核心内容布局 #

将全屏和Dialog的核心业务内容抽离为独立Composable，避免重复代码：

// 共享的核心内容
@Composable
fun TargetCoreContent(viewModel: TargetViewModel, onClose: () -> Unit) {
    Column(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
        Text(text = viewModel.content.value, style = MaterialTheme.typography.headlineSmall)
        Button(onClick = onClose) {
            Text("关闭")
        }
        // 其他业务组件...
    }
}

// 全屏页面容器
@Composable
fun FullScreenTargetContent(viewModel: TargetViewModel, onBack: () -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("目标页面") },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                    }
                }
            )
        }
    ) { paddingValues ->
        TargetCoreContent(
            viewModel = viewModel,
            onClose = onBack,
            modifier = Modifier.padding(paddingValues)
        )
    }
}

// Dialog容器
@Composable
fun DialogTargetContent(viewModel: TargetViewModel) {
    Card(modifier = Modifier.fillMaxWidth(0.8f).fillMaxHeight(0.7f)) {
        TargetCoreContent(
            viewModel = viewModel,
            onClose = { /* 触发Dialog关闭，即导航回退 */ }
        )
    }
}

3. 优势说明 #

• ViewModel作用域合规：通过backStackEntry获取ViewModel，严格遵循Navigation的生命周期管理，离开导航目标时自动销毁ViewModel，无需手动处理。
• 避免hack式修改：通过DialogProperties的dimAmount参数直接控制遮罩，无需反射操作Window，代码更稳定、可维护。
• 代码复用性高：核心业务内容抽离，仅需针对不同布局形态实现容器层逻辑，减少重复代码。

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