Jetpack Compose开发Android TV时遥控器OK键无法触发onClick事件如何解决

问题根因 #

• 重复添加focusable修饰符抢占了事件处理优先级：clickable修饰符默认已经内置了焦点处理逻辑，额外在其上方添加独立的focusable修饰符，会导致遥控器按键事件被上层focusable拦截，无法传递到clickable的回调逻辑中。
• 部分低版本Compose基础库默认未完全覆盖TV遥控器的确认键事件映射，需要手动补充适配。

解决方案 #

方案1：移除独立的focusable修饰符，直接使用clickable内置的焦点能力 #

修正后的代码如下：

@Composable
fun FocusablePill(
    text: String,
    onCommandEntered: (String) -> Unit, // 补充原代码缺失的点击回调参数
    focusRequester: FocusRequester = FocusRequester()
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isFocused by interactionSource.collectIsFocusedAsState()
    val isPressed by interactionSource.collectIsPressedAsState()
    val color = if (isFocused || isPressed) action else lightTranslucent_10
    val shape = RoundedCornerShape(CornerSize(24.dp))

    Text(
        text = text,
        color = MaterialTheme.colors.onPrimary,
        style = MaterialTheme.typography.button,
        modifier = Modifier
            .focusRequester(focusRequester)
            // 移除独立的focusable修饰符，使用clickable内置的焦点能力
            .clickable(
                interactionSource = interactionSource,
                indication = null,
                onClick = { onCommandEntered(text) }
            )
            .background(color, shape)
            .padding(16.dp, 8.dp)
    )
}

方案2：手动添加按键事件拦截适配遥控器确认键 #

如果方案1仍不生效，可在修饰符中补充遥控器按键处理逻辑，需提前导入android.view.KeyEvent类：

modifier = Modifier
    .focusRequester(focusRequester)
    .clickable(
        interactionSource = interactionSource,
        indication = null,
        onClick = { onCommandEntered(text) }
    )
    // 补充遥控器OK键/确认键处理逻辑
    .onKeyEvent { keyEvent ->
        if ((keyEvent.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_DPAD_CENTER 
                || keyEvent.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_ENTER)
            && keyEvent.nativeKeyEvent.action == KeyEvent.ACTION_DOWN) {
            onCommandEntered(text)
            true
        } else false
    }
    .background(color, shape)
    .padding(16.dp, 8.dp)

额外注意事项 #

• 注意Modifier的执行顺序是从左到右，事件拦截类修饰符要放在布局类修饰符之前才能正常生效。
• 较新版本Compose可直接引入官方Compose TV库组件，所有可交互组件默认已适配TV遥控器按键逻辑，无需额外手动处理。

内容的提问来源于stack exchange，提问作者Aitor Gómez