Jetpack Compose点击TextField外部无法失焦隐藏软键盘问题咨询

你当前的代码存在两个核心问题，导致点击外部失焦收键盘的逻辑失效：

1. 仅实现了焦点状态与提示文字显隐的绑定，没有添加点击输入框外部区域时主动清除焦点的逻辑。旧版Compose默认会在点击非可交互组件时自动触发焦点清除，该默认行为在新版本中已被移除，必须手动实现。
2. 软键盘收起不会随焦点丢失自动触发，必须显式调用键盘控制器API执行隐藏操作；同时你当前的提示文字显隐逻辑存在缺陷，输入框存在内容时失焦仍会显示提示，覆盖已输入内容。

核心修改点 #

• 引入FocusManager统一管理焦点，在所有非输入框的可点击区域触发时调用clearFocus()清除输入框焦点
• 引入SoftwareKeyboardController，在清除焦点的同时主动调用hide()收起软键盘
• 修正提示文字显隐逻辑：仅当输入框失焦且输入内容为空时才显示提示
• 给根布局添加无交互效果的点击监听，消费外部点击事件，避免事件穿透

修复后完整代码 #

ListScreen 组件 #

@Composable
fun ListScreen(
    navController: NavController
) {
    val focusManager = LocalFocusManager.current
    Surface(
        color = MaterialTheme.colors.background,
        modifier = Modifier
            .fillMaxSize()
            // 点击页面空白区域清除焦点，关闭点击水波纹效果
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = null
            ) {
                focusManager.clearFocus()
            }
    ) {
        Column {
            Spacer(modifier = Modifier.height(20.dp))
            Image(
                painter = painterResource(id = R.drawable.ic_international_pok_mon_logo),
                contentDescription = "Cards",
                modifier = Modifier
                    .fillMaxWidth()
                    .align(CenterHorizontally)
            )
            SearchBar(
                hint = "Search",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {

            }
        }
    }
}

SearchBar 组件 #

@Composable
fun SearchBar(
    modifier: Modifier = Modifier,
    hint: String = "",
    onSearch: (String) -> Unit = {}
) {
    var text by remember {
        mutableStateOf("")
    }
    var isFocused by remember {
        mutableStateOf(false)
    }
    val keyboardController = LocalSoftwareKeyboardController.current
    // 提示仅在失焦且输入为空时显示
    val isHintDisplayed = !isFocused && text.isEmpty()

    Box(modifier = modifier) {
        BasicTextField(
            value = text,
            onValueChange = {
                text = it
                onSearch(it)
            },
            maxLines = 1,
            singleLine = true,
            textStyle = TextStyle(color = Color.Black),
            modifier = Modifier
                .fillMaxWidth()
                .shadow(5.dp, CircleShape)
                .background(Color.White, CircleShape)
                .padding(horizontal = 20.dp, vertical = 12.dp)
                .onFocusChanged {
                    isFocused = it.isFocused
                    // 失焦时主动收起键盘
                    if (!it.isFocused) {
                        keyboardController?.hide()
                    }
                }
        )
        if(isHintDisplayed) {
            Text(
                text = hint,
                color = Color.LightGray,
                modifier = Modifier
                    .padding(horizontal = 20.dp, vertical = 12.dp)
            )
        }
    }
}

补充说明 #

你之前替换旧API的逻辑本身没有错误，FocusState.Active和新API的isFocused == true是完全等价的，功能失效和API替换无关，本质是新版Compose移除了自动清焦点的默认行为。
如果需要在页面中其他可交互组件（比如按钮、列表项）点击时也收起键盘，只需要在对应组件的点击回调中调用focusManager.clearFocus()即可。

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