Compose中if分支复用lambda传入的TextField焦点丢失问题求助

问题核心是Compose重组时，if分支切换会导致TextField所在的组件节点被销毁重建，进而丢失焦点。要保留当前if分支结构的前提下解决，只需给TextField添加稳定的key标识，让Compose识别为同一个组件实例，避免重建。

方法1：在分支调用content时添加key #

修改代码如下：

val condition = remember { mutableStateOf(false) }
val content = @Composable {
    TextField(value = "", onValueChange = {})
}

LaunchedEffect(Unit) {
    while (isActive) {
        delay(1000)
        condition.value = !condition.value
    }
}

Column {
    if (condition.value) {
        key("stable_textfield") {
            content()
        }
    } else {
        key("stable_textfield") {
            content()
        }
    }
}

方法2：在content内部给TextField加key #

也可以把key直接放在content的TextField外层，这样分支调用时无需重复写key：

val condition = remember { mutableStateOf(false) }
val content = @Composable {
    key("stable_textfield") {
        TextField(value = "", onValueChange = {})
    }
}

LaunchedEffect(Unit) {
    while (isActive) {
        delay(1000)
        condition.value = !condition.value
    }
}

Column {
    if (condition.value) {
        content()
    } else {
        content()
    }
}

原理说明 #

Compose默认通过组件在布局树中的位置判断身份，if分支切换时，原分支的TextField节点会被移除，新分支的是全新节点，导致焦点丢失。key函数会让Compose以指定的标识识别组件，只要key相同，即使在不同分支，Compose也会复用原组件实例，保留焦点状态。

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