按返回键弹出AlertDialog 修复@Composable调用报错

BackHandler 接收的回调lambda属于非Composable上下文，按照Jetpack Compose的规则，带@Composable注解的组件（也就是你写的AlertDialogComponent()）只能在Composable上下文里调用，直接在BackHandler的回调里写Composable调用就会触发你遇到的报错。

Compose是声明式UI框架，不要在事件回调里直接命令式插入UI组件，要通过状态驱动UI渲染：

1. 定义一个布尔类型的状态，用来控制弹窗是否显示
2. 在BackHandler的回调里只做状态更新，把控制弹窗的状态设为显示
3. 在Composable的正文作用域里，根据状态值判断是否渲染弹窗组件

完整实现代码参考：

@Composable
fun PageWithBackConfirm() {
    // 定义弹窗显示状态
    val showExitDialog = remember { mutableStateOf(false) }

    // 监听返回按键
    BackHandler(enabled = true) {
        // 回调里仅更新状态，不直接调用Composable组件
        showExitDialog.value = true
    }

    // 主页面内容
    // ... 写你的页面其他UI逻辑

    // 根据状态决定是否渲染弹窗，这部分处于Composable上下文，符合调用规则
    if (showExitDialog.value) {
        AlertDialogComponent(
            onDismissRequest = { showExitDialog.value = false },
            onConfirmClick = {
                // 确认返回的业务逻辑，比如退出页面
                showExitDialog.value = false
                // 比如调用finish()或者navController.popBackStack()执行返回操作
            }
        )
    }
}

• 你代码中写的BackHanlder存在拼写错误，正确的API名是BackHandler，拼写错误也会导致编译异常，需要同步修正
• 所有事件回调（包括BackHandler回调、组件onClick回调、协程回调等）都不是Composable上下文，里面只能执行普通逻辑、更新状态，不能直接调用Composable函数
• UI的显示隐藏必须由状态驱动，不要试图在事件里直接命令式创建、显示弹窗类组件

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