如何在保留状态的前提下交换两个Composable组件？

完全可以实现，核心是利用Compose的key函数为每个组件绑定独立于布局位置的唯一标识，让Compose能正确识别组件身份，避免交换位置时重置状态。

原理说明 #

Compose默认通过组件在布局树中的位置来追踪状态。如果直接交换两个TextField的位置，Compose会误以为是“原来的上TextField换成了下TextField的内容”，从而重置状态。而key函数会强制Compose以你指定的标识来识别组件，只要标识不变，组件的状态就会被保留，不管它在布局中的位置如何变化。

实现示例 #

以两个可交换的TextField为例，我们可以用一个带唯一ID的数据类来管理每个TextField的状态，点击按钮时交换数据列表的顺序，再通过key绑定ID：

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.material.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember

// 用带唯一ID的数据类存储每个TextField的状态
data class TextFieldState(val id: Int, var text: String)

@Composable
fun SwappableTextFields() {
    // 用mutableStateListOf管理可交换的状态列表
    var textFields by remember {
        mutableStateListOf(
            TextFieldState(1, ""),
            TextFieldState(2, "")
        )
    }

    Column {
        // 遍历状态列表，为每个TextField绑定唯一key
        textFields.forEach { state ->
            key(state.id) {
                TextField(
                    value = state.text,
                    onValueChange = { state.text = it },
                    label = { Text("TextField ${state.id}") }
                )
            }
        }

        Button(onClick = {
            // 交换列表中元素的位置
            textFields = textFields.reversed().toMutableStateList()
        }) {
            Text("交换位置")
        }
    }
}

关键注意点 #

• 不能用索引作为key：如果用列表索引当key，交换位置后索引会跟着变，Compose还是会认为组件身份改变，导致状态重置。
• key必须是稳定且唯一的标识：比如示例中的id，它和组件的位置无关，只和组件本身绑定，这样交换位置时key不变，状态就能保留。

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