Jetpack撰写TextField模糊事件

Question

我正在实现表单控件，验证等。我希望只有当用户"模糊"时才显示错误信息。TextField，换句话说，当字段失去焦点时。在Angular中，我们已经触及了可以继续进行的状态。如何收听在Jetpack作曲失去焦点状态?

@Composable
fun Screen() {
TextField(
onBlur = {
// P.S. This parameter does not exist
}
)
}

Answer 1

您可以使用onFocusChanged.

示例代码:

var color by remember { mutableStateOf(Black) }
Box(
Modifier
.border(2.dp, color)
// The onFocusChanged should be added BEFORE the focusable that is being observed.
.onFocusChanged { color = if (it.isFocused) Green else Black }
.focusable()
)

更新答:

TextField API更新-合并onFocus和onBlur回调为单个onFocusChange(Boolean)回调参数

来源:Version 0.1.0-dev15 - July 22 2020

Answer 2

如果有人仍然有这个问题，我使用@snorlax答案解决了这个问题，但改进了它。我的问题是TextField数据验证。TextField本质上是可聚焦的，不同于Box，所以在定义事件后添加.focusable()并没有按照我的计划进行:一旦组件出现在屏幕上，验证就会发生，显然我们不希望这样。

在.onFocusChanged修饰符上，我们可以检查事件类型并使用它来改变模糊状态，然后触发验证。我有一个validate()函数和一个validState布尔状态，我在我的演示器和我的视图之间使用，但我将使它简单在这里，你可以忽略状态类的实现:我们有焦点事件，我们可以用一个简单的标志来模拟模糊事件:

class FieldValidState {
var value: Boolean by mutableStateOf(true)
}
@Composable
fun TextFieldValidation(validState: FieldValidState = remember { FieldValidState() })
Column {
var isBlurred = false 
TextField(
Modifier
.onFocusChanged { 
if (!it.isFocused && isBlurred) validState.value = validate()
if (it.isFocused && !isBlurred) isBlurred = true }
)
}
}

所以这里发生的是:我希望验证函数在失去对TextField的关注后被触发。在启动时，字段是不活动的(即it.isFocused == false)，但我不想验证它。因此，一旦焦点集中在现场，并且之前没有模糊，isBlurred就为真，当焦点失去焦点时，它将被验证。

让我知道这是否有帮助!谢谢!