Jetpack Compose嵌套组件MutableInteractionSource问题：onNavigateBack未触发

你的代码存在两个核心问题，导致onNavigateBack()始终无法被调用：

1. 父组件的空clickable拦截了所有点击事件 #

最外层BoxWithConstraints添加了空实现的clickable修饰符，再加上fillMaxSize()让它占满全屏。在Compose的事件传递逻辑中，父组件的点击事件会优先消费点击动作，直接导致子组件的clickable完全无法响应。

2. 两个可点击子Box位置完全重叠 #

两个设置了clickable的子Box都使用Alignment.CenterStart对齐，导致它们在屏幕上完全重叠，即使父组件的点击拦截被移除，点击区域也会出现冲突。

修复后的代码 #

@Composable
fun CenterAlignedContentWithBlackOverlay(
    onNavigateBack: () -> Unit,
    content: @Composable () -> Unit
) {
    BoxWithConstraints(modifier = Modifier
        .fillMaxSize()
        .background(color = Color.Black.copy(alpha = 0.5f))
        // 可选：如果需要点击黑色背景区域也触发返回，保留这行
        .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
            onNavigateBack()
        }) {
        val width = maxWidth
        
        // 左侧可点击区域
        Box(modifier = Modifier
            .width(width / 4)
            .align(Alignment.CenterStart)
            .blur(3.dp)
            .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
                onNavigateBack()
            }
        )
        
        // 中间内容区域
        Box(
            modifier = Modifier
                .width(width / 2)
                .background(colors.background)
                .align(Alignment.Center)
        ) {
            content()
        }
        
        // 右侧可点击区域（修正对齐方式，避免与左侧重叠）
        Box(modifier = Modifier
            .width(width / 4)
            .align(Alignment.CenterEnd)
            .blur(3.dp)
            .clickable(indication = null, interactionSource = remember { MutableInteractionSource() }) {
                onNavigateBack()
            })
    }
}

关键修复说明 #

• 移除了BoxWithConstraints上的空clickable，消除点击拦截；如果需要点击黑色背景也触发返回，再为背景添加对应的clickable实现。
• 将右侧可点击Box的对齐方式改为Alignment.CenterEnd，让左右两个点击区域分开，避免位置重叠。
• 每个clickable使用独立的MutableInteractionSource（如果不需要共享交互状态，也可以省略该参数，Compose会自动创建默认实例）。

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