Jetpack Compose中Popup外组件无法接收未处理按键事件的解决问询

问题场景 #

以下代码中，Popup内部的Box会响应按键事件，但外部父Box的onKeyEvent不会收到未处理的事件——因为Popup是独立窗口层级，事件默认无法跨窗口传递：

Box(
    Modifier
        .onKeyEvent({
            Log.d("my_log", "Box key event ${it.nativeKeyEvent.keyCode}")
            return@onKeyEvent false
        })
        .focusable(true)
) {
    Popup(
        properties = PopupProperties(focusable = true)
    ) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(MaterialTheme.colorScheme.background)
                .border(BorderStroke(2.dp, Color.Black))
                .onFocusChanged { state -> Log.d("my_log", "Popup Box 1 $state") }
                .clickable(onClick = {
                    Log.d("my_log", "Popup Box 1 click")
                })
                .onKeyEvent { event ->
                    Log.d("my_log", "Popup Box 1 key event ${event.nativeKeyEvent.keyCode}")
                    return@onKeyEvent false
                })
    }
}

解决方案 #

方案1：通过逻辑回调传递事件

将父组件的按键处理逻辑抽离为独立函数，在Popup内部未处理事件时主动调用该函数，实现事件传递：

// 抽离父组件的按键处理逻辑
val parentKeyHandler = { event: KeyEvent ->
    Log.d("my_log", "Box key event ${event.nativeKeyEvent.keyCode}")
    false // 返回false表示未处理，可继续传递
}

Box(
    Modifier
        .onKeyEvent(parentKeyHandler)
        .focusable(true)
) {
    Popup(
        properties = PopupProperties(focusable = true)
    ) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(MaterialTheme.colorScheme.background)
                .border(BorderStroke(2.dp, Color.Black))
                .onFocusChanged { state -> Log.d("my_log", "Popup Box 1 $state") }
                .clickable(onClick = {
                    Log.d("my_log", "Popup Box 1 click")
                })
                .onKeyEvent { event ->
                    Log.d("my_log", "Popup Box 1 key event ${event.nativeKeyEvent.keyCode}")
                    // 调用父组件的处理逻辑，传递未处理事件
                    parentKeyHandler(event)
                })
    }
}

这种方式符合Compose声明式风格，耦合度低，适合大多数场景。

方案2：通过原生View机制分发事件

借助Android原生View的事件分发系统，将未处理的原生按键事件手动派发给父窗口的View：

Box(
    Modifier
        .onKeyEvent({
            Log.d("my_log", "Box key event ${it.nativeKeyEvent.keyCode}")
            return@onKeyEvent false
        })
        .focusable(true)
) {
    // 获取父窗口的根View
    val parentRootView = LocalView.current.parent as View
    
    Popup(
        properties = PopupProperties(focusable = true)
    ) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .background(MaterialTheme.colorScheme.background)
                .border(BorderStroke(2.dp, Color.Black))
                .onFocusChanged { state -> Log.d("my_log", "Popup Box 1 $state") }
                .clickable(onClick = {
                    Log.d("my_log", "Popup Box 1 click")
                })
                .onKeyEvent { event ->
                    Log.d("my_log", "Popup Box 1 key event ${event.nativeKeyEvent.keyCode}")
                    // 手动将原生事件分发到父窗口
                    parentRootView.dispatchKeyEvent(event.nativeKeyEvent)
                    false
                })
    }
}

该方案依赖Android原生API，需注意不同版本的兼容性，适合需要底层事件控制的场景。

注意事项 #

• 两种方案中，需根据业务需求调整事件处理的返回值，避免重复处理或循环传递
• 方案1的回调方式更推荐，因为它遵循Compose的设计原则，不依赖底层View实现

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