如何在 Compose 中编辑 TextField 时处理按键事件？

Question

我正在桌面上制作一个国际象棋引擎，我试图实现的一件事是TextField我可以粘贴几个动作来重新创建游戏。

我在保存输入到可组合项中的文本时遇到问题TextField。

我的文本可组合如下，我知道在我当前的实现中，每次移动变量更改时它都会打印，但我只是希望在按下ENTER键盘上的键时发生这种情况。

我正在使用 print 来尝试一些代码，但我想做的是将字符串保存到列表或其他内容中，但我可以稍后在自己的中实现。

我只找到有关如何使用 android 和 android 特定方法执行此操作的解释。

Text("   Play", textAlign = TextAlign.Center, fontSize = 30.sp)
val move = remember { mutableStateOf("Play") }
TextField(
    value = move.value,
    onValueChange = { move.value = it },
    label = { Text("Move") },
    maxLines = 1,
    textStyle = TextStyle(color = Color.Black, fontWeight = FontWeight.Bold),
    modifier = Modifier.padding(20.dp)
)
println(move.value)

有人向我指出了处理ENTER按键绑定的解决方案，如这里所回答的： How to trigger PC Keyboard input in Kotlin Desktop Compose 我只是遇到了一些问题，当我 按下连续打印ENTER时，我无法处理字符串ENTER根据我的研究，不仅仅是一次，我需要实现这样的事情： Box 不会捕获 Compose Desktop 中的关键事件 ，但我似乎无法使用不确定KeyEvent.ACTION_UP它是否特定于 editText，如果我'我缺少一些导入，或者是否有其他方法可以使用 TextField 可组合项来完成此操作。

给出建议后我的代码

val requester = remember { FocusRequester() }
LaunchedEffect(Unit) {
    requester.requestFocus()
}
Text("   Play", textAlign = TextAlign.Center, fontSize = 30.sp)
val move = remember { mutableStateOf("Play") }
TextField(
    value = move.value,
    onValueChange = { move.value = it },
    label = { Text("Move") },
    maxLines = 1,
    textStyle = TextStyle(color = Color.Black, fontWeight = FontWeight.Bold),
    modifier = Modifier.padding(20.dp)
        .onKeyEvent {
    //if(keyCode==KeyEvent.KEYCODE_ENTER&&event.action==KeyEvent.ACTION_UP){
            if (it.key == Key.Enter) {
                println(move.value)
                true
            } else {
                // let other handlers receive this event
                false
            }
        }
        .focusRequester(requester)
        .focusable()
)

我通过将 if 条件更改为以下方式解决了这个问题：

if (it.key == Key.Enter && move.value!="") {
    println(move.value)
    move.value = ""
    true
}

这样，每次我写东西并按下ENTER它时，都会打印字符串并清除 mutableState，而ENTER仍然按下时，它不会打印，因为 mutableState 是一个空字符串。我仍在寻找比这更好的解决方案

Answer 1

您可以使用 捕获关键事件Modifier.onKeyEvent。对于文本字段，您不需要任何焦点捕获，因为它已经存在。如果您需要对自定义视图执行相同的操作，请查看此答案

要检查按下了哪个按钮，可以使用key，要检查释放按钮的位置，可以检查type：

TextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .onKeyEvent { keyEvent ->
            if (keyEvent.key != Key.Enter) return@onKeyEvent false
            if (keyEvent.type == KeyEventType.KeyUp) {
                println("Enter released")
            }
            true
        }
)