Jetpack Compose中onKeyEvent修饰符无效问题

前言

最近在学习compose于是想写个app练手，在开发中遇到了问题记录下来。这是个TV APP。

问题描述

TV端应用和正常app不一样，无法用触摸的方式进行交互，需要用遥控器控制焦点。某些情况下，我们想要做好用户体验需要修改焦点的默认行为来达到我们想要的效果。

想要控制焦点，就需要用遥控器的上下左右键，那么首先就需要监听这些按键。compose提供了Modifier.onKeyEvent方法进行监听，但是我的监听居然无效。

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .onKeyEvent {
                            if (it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_DPAD_UP || it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
                                playerMenuState.isDisplayed = true
                                return@onKeyEvent true
                            } else {
                                return@onKeyEvent false
                            }
                        }
                ) {
                    Text(text = "666")
                    PlayerMenu(
                        modifier = Modifier.align(Alignment.BottomCenter),
                        state = playerMenuState,
                    )
                }

在以上代码中，希望监听外层容器的点击事件，按遥控器的上下键弹出菜单。

解决

查阅资料后发现，需要与焦点一起用才行，于是在.onKeyEvent{}后面加上代码.focusable()，解决问题

                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .onKeyEvent {
                            if (it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_DPAD_UP || it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_DPAD_DOWN) {
                                playerMenuState.isDisplayed = true
                                return@onKeyEvent true
                            } else {
                                return@onKeyEvent false
                            }
                        }
                        .focusable()//add
                ) {
                    Text(text = "666")
                    PlayerMenu(
                        modifier = Modifier.align(Alignment.BottomCenter),
                        state = playerMenuState,
                    )
                }