Compose Multiplatform中存储标签页内容状态的正确方式是什么？

针对标签页切换时状态丢失的问题，以下是几种实用的解决方案：

方案1：父组件持有子标签页状态 #

将所有标签页的状态提升至标签页容器（如TabRow的父组件）中，父组件在标签页切换过程中不会被销毁，因此状态能稳定保留。若需要兼容配置变化（如Android端屏幕旋转），可搭配rememberSaveable使用。

示例代码：

// 定义各标签页的状态数据类
data class Tab1State(val inputText: String = "")
data class Tab2State(val counter: Int = 0)

@Composable
fun TabHost() {
    // 父组件中持有所有标签页的状态
    val tab1State = rememberSaveable { mutableStateOf(Tab1State()) }
    val tab2State = rememberSaveable { mutableStateOf(Tab2State()) }
    
    var selectedTabIdx by remember { mutableStateOf(0) }

    TabRow(selectedTabIndex = selectedTabIdx) {
        Tab(selected = selectedTabIdx == 0, onClick = { selectedTabIdx = 0 }, text = { Text("标签1") })
        Tab(selected = selectedTabIdx == 1, onClick = { selectedTabIdx = 1 }, text = { Text("标签2") })
    }

    when (selectedTabIdx) {
        0 -> Tab1Content(
            state = tab1State.value,
            onStateUpdate = { tab1State.value = it }
        )
        1 -> Tab2Content(
            state = tab2State.value,
            onStateUpdate = { tab2State.value = it }
        )
    }
}

@Composable
fun Tab1Content(state: Tab1State, onStateUpdate: (Tab1State) -> Unit) {
    TextField(
        value = state.inputText,
        onValueChange = { onStateUpdate(state.copy(inputText = it)) },
        label = { Text("输入内容") }
    )
}

@Composable
fun Tab2Content(state: Tab2State, onStateUpdate: (Tab2State) -> Unit) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("当前计数：${state.counter}")
        Button(onClick = { onStateUpdate(state.copy(counter = state.counter + 1)) }) {
            Text("+1")
        }
    }
}

方案2：自定义跨平台状态容器（替代ViewModel） #

若标签页业务逻辑复杂，或需要在多组件间共享状态，可自定义独立的状态容器类，通过remember在父组件中持有实例（确保实例唯一且不会因重组销毁），也可搭配跨平台依赖注入框架（如Koin）管理实例生命周期。

示例代码：

// 自定义状态容器，封装标签页的状态与业务逻辑
class Tab1StateHolder {
    private val _state = MutableStateFlow(Tab1State())
    val state = _state.asStateFlow()

    fun updateInputText(newText: String) {
        _state.value = _state.value.copy(inputText = newText)
    }
}

class Tab2StateHolder {
    private val _state = MutableStateFlow(Tab2State())
    val state = _state.asStateFlow()

    fun incrementCounter() {
        _state.value = _state.value.copy(counter = _state.value.counter + 1)
    }
}

@Composable
fun TabHost() {
    // 在父组件中持有状态容器实例
    val tab1Holder = remember { Tab1StateHolder() }
    val tab2Holder = remember { Tab2StateHolder() }
    
    var selectedTabIdx by remember { mutableStateOf(0) }

    TabRow(selectedTabIndex = selectedTabIdx) { /* 标签项定义 */ }

    when (selectedTabIdx) {
        0 -> Tab1Content(holder = tab1Holder)
        1 -> Tab2Content(holder = tab2Holder)
    }
}

@Composable
fun Tab1Content(holder: Tab1StateHolder) {
    val state by holder.state.collectAsState() // 跨平台通用收集方式，Android可替换为collectAsStateWithLifecycle

    TextField(
        value = state.inputText,
        onValueChange = { holder.updateInputText(it) },
        label = { Text("输入内容") }
    )
}

@Composable
fun Tab2Content(holder: Tab2StateHolder) {
    val state by holder.state.collectAsState()

    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text("当前计数：${state.counter}")
        Button(onClick = { holder.incrementCounter() }) {
            Text("+1")
        }
    }
}

方案3：使用rememberSaveable直接持久化简单状态 #

如果标签页状态为可序列化的简单类型（如String、Int），可直接在子组件中用rememberSaveable持有状态。即使子组件因标签页切换被销毁，状态也会被持久化存储，重新创建组件时自动恢复。

示例代码：

@Composable
fun Tab1Content() {
    var inputText by rememberSaveable { mutableStateOf("") }

    TextField(
        value = inputText,
        onValueChange = { inputText = it },
        label = { Text("输入内容") }
    )
}

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