点击Layout组件后如何显示全屏Dialog或跳转至新页面？

一、实现全屏Dialog #

• 核心问题：默认Dialog组件会继承系统窗口的默认宽度约束和内边距，导致无法铺满屏幕。需要通过配置取消默认宽度限制，并适配系统状态栏/导航栏的占位。
• 实现步骤：
  1. 用状态变量控制Dialog的显示状态（如var showFullScreenDialog by remember { mutableStateOf(false) }）
  2. 在Dialog组件中设置properties = DialogProperties(usePlatformDefaultWidth = false)，关闭系统默认宽度限制
  3. 内部用Box或Column填充全屏，通过WindowInsets处理系统栏遮挡问题
• 代码示例：

@Composable
fun GridItem(onClick: () -> Unit) {
    Column(
        modifier = Modifier
            .clickable { onClick() }
            .padding(16.dp)
    ) {
        Text("点击打开全屏添加Dialog")
    }
}

@Composable
fun FullScreenAddDialogDemo() {
    var showFullScreenDialog by remember { mutableStateOf(false) }

    if (showFullScreenDialog) {
        Dialog(
            onDismissRequest = { showFullScreenDialog = false },
            properties = DialogProperties(usePlatformDefaultWidth = false)
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.White)
                    .windowInsetsPadding(WindowInsets.systemBars)
            ) {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    Text("添加条目表单", fontSize = 20.sp)
                    // 这里放置输入框、提交按钮等表单内容
                    Button(onClick = { showFullScreenDialog = false }) {
                        Text("关闭")
                    }
                }
            }
        }
    }

    // Grid布局中的单个条目
    GridItem(onClick = { showFullScreenDialog = true })
}

二、跨NavGraph页面跳转 #

• 核心前提：确保当前Composable能获取到NavController——在NavHost的子Composable中，可直接通过LocalNavController.current获取。
• 跳转逻辑：
  1. 跳转到当前AppBarNavGraph内的页面：直接使用对应目的地的route字符串
  2. 跳转到RootNavGraph的页面：指定Root中定义的完整route路径，可通过popUpTo等参数控制栈行为
• 代码示例：

@Composable
fun GridItemWithNavigation() {
    val navController = LocalNavController.current

    Column(
        modifier = Modifier
            .clickable {
                // 跳转到RootNavGraph中的AddItem页面
                navController.navigate("AddItemScreen") {
                    // 可选：跳转后清空当前栈到Root的起始页，避免重复入栈
                    popUpTo(navController.graph.startDestinationId) {
                        saveState = true
                    }
                    launchSingleTop = true
                }
            }
            .padding(16.dp)
    ) {
        Text("点击跳转到添加页面")
    }
}

// 示例NavGraph定义
@Composable
fun RootNavHost(navController: NavController) {
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") {
            HomeScreen()
        }
        // 嵌套AppBarNavGraph
        navigation(startDestination = "appBarHome", route = "appBarGraph") {
            composable("appBarHome") {
                AppBarHomeScreen()
            }
        }
        // Root级别的添加页面
        composable("AddItemScreen") {
            AddItemScreen(navController)
        }
    }
}

额外注意事项 #

• 全屏Dialog如需隐藏状态栏/导航栏，可通过LocalWindowInfo.current或androidx.window库修改窗口属性
• 页面跳转前确认所有目的地的route在NavGraph中已正确定义，避免拼写错误
• 嵌套NavGraph跳转时，可通过navController.graph.findNode(R.id.目标ID)验证目的地是否存在

内容的提问来源于stack exchange，提问作者c-an