Jetpack Compose切换标签页时remember状态丢失的问题求助

你遇到的问题根源在于：切换到Tab B时，TestScreen会被Compose从Composition中移除，组件内部用remember保存的状态会被自动回收。切回Tab A时，TestScreen重新创建，checked状态就会回到初始的true。

不需要用全局变量，Compose推荐的状态提升是更优雅的解决方案——把需要跨组件保留的状态移到不会被销毁的父组件中，再通过参数传递给子组件。

修改后的代码示例 #

@Composable
fun TestScreen(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
    Checkbox(checked = checked, onCheckedChange = onCheckedChange)
}

@Composable
fun TabContainer() {
    var index by mutableStateOf(0)
    val tabs = listOf("Tab A", "Tab B")
    // 将Tab A的状态提升到父组件，父组件不会随标签页切换被销毁
    var tabAChecked by remember { mutableStateOf(true) }

    MaterialTheme {
        Column(Modifier.fillMaxWidth()) {
            TabRow(selectedTabIndex = index) {
                tabs.forEachIndexed { i, title ->
                    Tab(
                        selected = index == i,
                        onClick = { index = i },
                        text = { Text(title) }
                    )
                }
            }
            when (index) {
                0 -> TestScreen(checked = tabAChecked, onCheckedChange = { tabAChecked = it })
                1 -> Text("Tab B 内容")
            }
        }
    }
}

fun main() = application { TabContainer() }

扩展优化（多标签页场景） #

如果有多个标签页需要保存状态，可以用数据类统一管理，避免变量泛滥：

// 统一管理所有标签页的状态
data class TabStates(
    val tabAChecked: Boolean = true,
    // 可添加其他Tab的状态，比如tabBSwitchEnabled等
)

@Composable
fun TabContainer() {
    var index by mutableStateOf(0)
    val tabs = listOf("Tab A", "Tab B")
    var tabStates by remember { mutableStateOf(TabStates()) }

    MaterialTheme {
        Column(Modifier.fillMaxWidth()) {
            TabRow(selectedTabIndex = index) {
                tabs.forEachIndexed { i, title ->
                    Tab(
                        selected = index == i,
                        onClick = { index = i },
                        text = { Text(title) }
                    )
                }
            }
            when (index) {
                0 -> TestScreen(
                    checked = tabStates.tabAChecked,
                    onCheckedChange = { tabStates = tabStates.copy(tabAChecked = it) }
                )
                1 -> Text("Tab B 内容")
            }
        }
    }
}

原理说明 #

• 状态提升后，tabAChecked（或tabStates）保存在TabContainer中，而TabContainer不会随标签页切换被销毁，因此状态会一直保留。
• 子组件TestScreen变成无状态组件，只负责接收状态和回调，符合Compose单向数据流的设计原则，代码更易维护和测试。

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