如何在 Compose 中编辑 TextField 期间处理关键事件？答案

【问题标题】：How to handle key events during TextField editing in Compose?如何在 Compose 中编辑 TextField 期间处理关键事件？
【发布时间】：2021-11-23 20:30:03
【问题描述】：

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

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

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

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

我只找到关于如何使用 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 inputs in Kotlin Desktop Compose 我只是遇到了一些问题，当我按 ENTER 时，我按 ENTER 无法处理字符串，根据我需要实施的研究，它连续打印而不是只打印一次像这样的东西： Box doesn't capture key events in 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 是一个空字符串。我仍在寻找比这更好的解决方案

【问题讨论】：

只是部分原因，因为我仍然不知道如何保存 move mutableState，所以我想将其声明为全局变量并在 Thread 中创建一个方法以继续检查是否按下了 ENTER，但这变量类型是可组合的一部分，不能在可组合之外声明，所以据我所知，我不能在全局范围内声明它。
我设法按照你说的那样实现了它，但我只需要快速提问，所以唯一的方法是使用 ExperimentalUI 并且每次我按下键时它都会连续打印，而不是根据我的研究只打印一次我需要实现类似stackoverflow.com/questions/47298935/… 的东西，但我似乎无法使用 KeyEvent.ACTION_UP 不确定是否是因为它特定于editText，如果是这样，我是否需要将我的实现更改为是这样还是只是因为我错过了导入？

标签： kotlin android-jetpack-compose compose-desktop

【解决方案1】：

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

要检查哪个按钮被按下，你可以使用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
        }
)

【讨论】：