Jetpack Compose如何正确处理键盘Escape按钮触发返回导航？

根据无障碍指南，键盘Escape按钮应触发返回导航，在Jetpack Compose中有两种常用的正确实现方式：

1. 优先使用BackHandler（官方推荐） #

Compose的BackHandler组件会自动处理物理返回键和键盘Escape键，完全符合无障碍要求，实现简洁高效：

import androidx.compose.material3.BackHandler
import androidx.navigation.NavController

@Composable
fun YourScreen(navController: NavController) {
    // 监听返回/ Escape事件
    BackHandler {
        // 执行返回导航逻辑，比如弹出当前页面栈
        navController.popBackStack()
        // 如果是关闭弹窗等场景，可替换为对应的关闭逻辑
    }

    // 页面内容
    // ...
}

BackHandler会自动绑定到当前Compose层级的返回逻辑，无需手动处理焦点或事件分发，是最推荐的实现方式。

2. 细粒度控制：使用Modifier.onKeyEvent #

如果需要针对Escape键做更定制化的处理（比如仅在特定组件获得焦点时响应），可以使用onKeyEvent修饰符：

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.isKeyUp
import androidx.compose.ui.input.key.key
import androidx.navigation.NavController

@Composable
fun YourScreen(navController: NavController) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .focusable() // 必须添加，确保组件能接收键盘事件
            .onKeyEvent { event ->
                // 判断是否为Escape键抬起事件
                if (event.isKeyUp && event.key == Key.Escape) {
                    navController.popBackStack()
                    true // 标记事件已被消费，避免继续传递
                }
                false // 不消费其他事件
            }
    ) {
        // 页面内容
        // ...
    }
}

注意：使用这种方式时，必须给组件添加focusable()修饰符，否则无法接收键盘事件。

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