如何在Jetpack Compose中实现点击自定义弹窗外部关闭功能？

原代码存在的问题 #

• 状态变量定义在Composable外部，违反Compose状态管理规范，可能导致状态更新无法触发UI重组。
• 点击判断逻辑错误：仅对比点击位置与弹窗左上角坐标是否相等，而非判断点击位置是否在弹窗区域之外。
• 布局层级错误：自定义弹窗位于全屏遮罩Box的外部，导致遮罩无法正确捕获弹窗外部的点击事件。
• 坐标系不匹配：onGloballyPositioned获取的是相对于根布局的位置，而pointerInput中的点击位置基于当前Box，两者坐标系不一致。

修正后的解决方案 #

@Composable
fun MainScreen() {
    // 使用remember在Composable内部管理状态，确保状态更新触发重组
    var isPopUpOpen by remember { mutableStateOf(false) }
    var popupRect by remember { mutableStateOf(Rect.Zero) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(if (isPopUpOpen) Color.Black.copy(alpha = 0.2f) else Color.Transparent)
            .pointerInput(isPopUpOpen) {
                if (!isPopUpOpen) return@pointerInput
                awaitPointerEventScope {
                    val downEvent = awaitFirstDown()
                    // 判断点击位置是否在弹窗矩形区域之外
                    if (!popupRect.contains(downEvent.position)) {
                        isPopUpOpen = false
                    }
                }
            }
    ) {
        // 主内容区域
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Button(onClick = { isPopUpOpen = !isPopUpOpen }) {
                Text(text = if (isPopUpOpen) "关闭弹窗" else "打开弹窗")
            }
        }

        // 自定义弹窗，嵌套在Box内部确保层级正确
        AnimatedVisibility(
            visible = isPopUpOpen,
            enter = fadeIn(),
            exit = fadeOut()
        ) {
            Box(
                modifier = Modifier
                    .offset(x = 90.dp, y = 150.dp)
                    .onGloballyPositioned { layoutCoordinates ->
                        // 获取相对于父容器（Box）的位置和尺寸，计算弹窗矩形区域
                        val parentPosition = layoutCoordinates.positionInParent()
                        val size = layoutCoordinates.size
                        popupRect = Rect(
                            left = parentPosition.x,
                            top = parentPosition.y,
                            right = parentPosition.x + size.width,
                            bottom = parentPosition.y + size.height
                        )
                    }
                    .background(Color.Blue)
                    .size(200.dp)
            ) {
                Text(text = "自定义弹窗", color = Color.White, modifier = Modifier.align(Alignment.Center))
            }
        }
    }
}

关键修改说明 #

1. 状态管理优化：用remember将状态变量移至Composable内部，保证状态更新能正确触发UI重组。
2. 布局层级调整：将自定义弹窗嵌套在全屏Box中，使遮罩层位于弹窗下方，确保外部点击能被遮罩捕获。
3. 区域计算修正：使用positionInParent获取弹窗相对于父容器的位置，结合尺寸计算出完整的可点击矩形区域，解决坐标系不匹配问题。
4. 点击逻辑修复：判断点击位置是否在弹窗矩形区域之外，满足条件则关闭弹窗，逻辑更准确。

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