Android Compose TextField点击外部区域如何隐藏软键盘

问题根源 #

默认Compose布局的空白区域不会自动消费点击事件，也不会主动触发焦点转移。点击TextField外部时，焦点仍然被TextField持有，因此onFocusChanged不会触发失焦回调，软键盘自然不会关闭。给Column添加普通焦点处理程序无效的原因是Column默认不接收点击事件，相关回调根本不会执行。

解决方案 #

给根Column添加点击事件处理，主动清空全局焦点，触发TextField的失焦逻辑即可，修改后的代码如下：

val (nameText, setNameText) = remember { mutableStateOf("")}
val keyboardController = LocalSoftwareKeyboardController.current
val focusRequester = FocusRequester()
// 新增获取全局焦点管理器
val focusManager = LocalFocusManager.current

Column(
    modifier = Modifier
        .fillMaxWidth()
        .fillMaxHeight()
        .padding(10.dp)
        // 新增点击处理，点击空白区域清空焦点
        .clickable { 
            focusManager.clearFocus() 
        }
        // 可选：如果不需要点击波纹效果，把上面的clickable换成下面的pointerInput实现
        // .pointerInput(Unit) {
        //     detectTapGestures(onTap = {
        //         focusManager.clearFocus()
        //     })
        // }
) { 
    Row(
        modifier = Modifier
            .fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceAround
    ) {
        TextField(
            value = nameText,
            onValueChange = setNameText,
            modifier = Modifier
                .focusRequester(focusRequester)
                .onFocusChanged {
                    if (!it.isFocused) {
                        keyboardController?.hide()
                    }
                }
                .padding(horizontal = 0.dp, vertical = 0.dp)
                .height(50.dp)
                .fillMaxWidth(),
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text,
                imeAction = androidx.compose.ui.text.input.ImeAction.Done
            ),
            keyboardActions = KeyboardActions(onDone = {
                focusManager.clearFocus()
            }),
            placeholder = { Text("Enter a name", fontSize = 14.sp) }
        )
    }
}

注意事项 #

• 该方案完全兼容Compose 1.0.2版本，不需要升级依赖
• 页面内其他可点击控件的事件不会被Column的点击拦截，不会影响原有逻辑
• 调用focusManager.clearFocus()后会自动触发所有持有焦点控件的onFocusChanged回调，原有软键盘隐藏逻辑可以正常执行

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