Compose TopAppBar中TextField的两个问题求助：失焦异常与光标残留

问题1：手动收起键盘后TextField保持聚焦状态 #

手动收起系统键盘时，TextField不会自动释放焦点，导致样式无法回到未聚焦状态。可以通过焦点控制+多场景监听来解决：

修改后的代码示例 #

@Composable
fun SearchBar() {
    var text by remember { mutableStateOf("") }
    val focusRequester = remember { FocusRequester() }
    val keyboardController = LocalSoftwareKeyboardController.current
    var isFocused by remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .height(70.dp)
            .fillMaxWidth()
            .background(MaterialTheme.colors.primary)
            // 点击外部区域时清除TextField焦点
            .pointerInput(Unit) {
                detectTapGestures {
                    focusRequester.freeFocus()
                    keyboardController?.hide()
                }
            },
        contentAlignment = Alignment.BottomCenter
    ) {
        TextField(
            leadingIcon = {
                Icon(imageVector = Icons.Default.Search, contentDescription = null)
            },
            placeholder = {
                Text("find more...", color = Color.White)
            },
            shape = RectangleShape,
            colors = TextFieldDefaults.textFieldColors(
                textColor = Color.White,
                backgroundColor = MaterialTheme.colors.primary,
                focusedIndicatorColor = Color.White,
                unfocusedIndicatorColor = Color.Gray,
                disabledIndicatorColor = Color.Black
            ),
            value = text,
            singleLine = true,
            onValueChange = { text = it },
            modifier = Modifier
                .padding(bottom = 10.dp)
                .size(360.dp, 60.dp)
                .focusRequester(focusRequester)
                .onFocusChanged { state ->
                    isFocused = state.isFocused
                    // 失去焦点时同步关闭键盘
                    if (!state.isFocused) keyboardController?.hide()
                },
            // 点击输入法Done按钮时清除焦点
            keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done),
            keyboardActions = KeyboardActions(
                onDone = {
                    focusRequester.freeFocus()
                    keyboardController?.hide()
                }
            )
        )
    }

    // 监听返回键（手动收起键盘场景），清除焦点
    DisposableEffect(Unit) {
        val backCallback = object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                if (isFocused) {
                    focusRequester.freeFocus()
                    keyboardController?.hide()
                    isFocused = false
                } else {
                    remove()
                }
            }
        }
        ViewTreeOnBackPressedDispatcherOwner.get()?.onBackPressedDispatcher?.addCallback(backCallback)
        onDispose { backCallback.remove() }
    }
}

核心逻辑：

• 用FocusRequester主动控制TextField的焦点状态
• 覆盖外部点击、输入法Done按钮、返回键三个场景，触发焦点释放和键盘关闭
• 同步更新isFocused状态，确保TextField样式正常切换

问题2：页面切换时光标短暂残留 #

这个现象属于Compose框架的已知小问题，在部分版本中存在，可通过以下方式缓解：

1. 导航前主动清除焦点
   在执行页面导航的代码中，先执行焦点释放和键盘关闭操作，确保光标提前隐藏：

   // 示例导航逻辑
   val navController = rememberNavController()
   Button(onClick = {
       focusRequester.freeFocus()
       keyboardController?.hide()
       navController.navigate("new_screen")
   }) {
       Text("跳转新页面")
   }
   

2. 升级Compose版本
   检查当前Compose依赖版本，更新到最新稳定版，多数视觉残留类bug会在新版本中修复。

3. 绑定焦点状态控制光标可见性
   通过cursorColor参数，让光标在失去焦点时透明化：

   TextField(
       // 其他参数
       cursorColor = if (isFocused) Color.White else Color.Transparent
   )
   

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