如何捕获OutlinedTextField的焦点离开事件以关闭软键盘？

核心解决思路 #

要捕获TextField的焦点离开事件并关闭软键盘，需要结合焦点状态监听和软键盘控制器，同时处理外部按钮点击时主动清除焦点的逻辑。

具体实现步骤 #

1. 引入必要的依赖对象：在函数内部获取LocalSoftwareKeyboardController用于控制软键盘，创建FocusRequester来管理TextField的焦点状态。
2. 监听焦点变化：通过Modifier.onFocusChanged监听TextField的焦点状态，当焦点从获取变为失去时，关闭软键盘。
3. 外部按钮主动清除焦点：在按钮的点击事件中，调用焦点管理器的clearFocus()方法，强制TextField失去焦点。

修改后的完整代码 #

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.platform.LocalSoftwareKeyboardController
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp

@Composable
fun LabelName(nameUpdate: String = "", name: (String) -> Unit) {
    val keyboardController = LocalSoftwareKeyboardController.current
    val focusRequester = remember { FocusRequester() }

    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(end = 20.dp)
            .focusRequester(focusRequester)
            .onFocusChanged { state ->
                // 焦点失去时关闭软键盘
                if (!state.isFocused) {
                    keyboardController?.hide()
                }
            },
        value = nameUpdate,
        onValueChange = {
            name(manageLength(it))
        },
        label = {
            Text(
                text = stringResource(
                    id = if (nameUpdate.isNotEmpty()) R.string.name else R.string.add_new_name
                )
            )
        }
    )
}

// 示例长度处理函数，可根据实际需求修改
private fun manageLength(input: String): String {
    return input.take(15)
}

处理外部按钮点击时的焦点清除 #

如果页面中有按钮，点击时需要让TextField失去焦点，可在按钮点击事件中添加以下逻辑：

import androidx.compose.material.Button
import androidx.compose.ui.platform.LocalFocusManager

@Composable
fun YourScreen() {
    val focusManager = LocalFocusManager.current

    Button(
        onClick = {
            // 清除所有焦点，触发TextField的焦点离开事件
            focusManager.clearFocus()
            // 你的按钮业务逻辑
        }
    ) {
        Text("确认")
    }

    LabelName(nameUpdate = "", name = { /* 处理输入回调 */ })
}

关键说明 #

• onFocusChanged：实时监听焦点状态，当isFocused变为false时，调用键盘控制器的hide()方法关闭软键盘。
• LocalFocusManager.clearFocus()：主动清除页面内所有焦点，确保TextField失去聚焦状态，同时触发焦点离开逻辑。
• FocusRequester：用于精细控制TextField的焦点（比如主动请求焦点），这里配合焦点监听完成状态联动。

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