Compose TextField的onFocusChanged初始化触发，如何仅在用户失焦后执行验证？

问题分析 #

Compose 里的 Modifier.onFocusChanged 会在组件初始化阶段就触发（此时焦点状态为 Inactive），这和传统XML布局中onFocusChangedListener仅在用户实际交互控件时触发的行为不一样，导致错误验证逻辑在页面打开时就提前执行了，不符合需求。

解决方案 #

核心思路是区分初始化时的默认失焦事件和用户主动交互后的失焦事件，通过记录组件是否被用户主动聚焦过来实现：

方案1：用状态记录焦点交互历史 #

通过remember保存一个布尔状态，标记TextField是否曾经获得过用户主动触发的焦点，只有当组件已经被聚焦过且当前处于失焦状态时，才执行错误验证。

示例代码：

var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }
// 记录组件是否被用户主动聚焦过
var hasBeenFocused by remember { mutableStateOf(false) }

TextField(
    value = value,
    onValueChange = { value = it },
    label = { Text("Enter text") },
    modifier = Modifier
        .onFocusChanged { focusState ->
            // 用户主动聚焦时，标记状态
            if (focusState.isFocused) {
                hasBeenFocused = true
            }
            // 仅当曾经聚焦过，且当前失焦时执行验证
            if (hasBeenFocused && !focusState.isFocused) {
                // 这里写你的错误验证逻辑
                Log.d("TAG", "执行TextField错误验证")
            }
        }
)

方案2：结合FocusRequester精准控制 #

如果需要更精细的焦点控制，可以使用FocusRequester配合状态判断，效果和方案1一致：

val focusRequester = remember { FocusRequester() }
var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }
var hasUserInteracted by remember { mutableStateOf(false) }

TextField(
    value = value,
    onValueChange = { value = it },
    label = { Text("Enter text") },
    modifier = Modifier
        .focusRequester(focusRequester)
        .onFocusChanged { focusState ->
            if (focusState.isFocused) {
                hasUserInteracted = true
            }
            if (hasUserInteracted && !focusState.isFocused) {
                // 执行错误验证逻辑
                Log.d("TAG", "执行TextField错误验证")
            }
        }
)

原理说明 #

Compose的焦点系统在组件挂载时会默认派发Inactive状态的焦点事件，这是框架的设计行为。通过记录组件是否被用户主动聚焦过，就能过滤掉初始化阶段的无效触发，只响应用户主动移除焦点的动作，完美匹配需求。

内容的提问来源于stack exchange，提问作者jesobremonte