Jetpack Compose：保持大文本Text组件的滚动状态

问题场景：在Column可组合项中嵌套Text显示超长字符串并开启垂直滚动，跳转至第二个页面后返回，Text的滚动状态会重置到顶部。

问题原因 #

当从FirstScreen跳转到SecondScreen时，FirstScreen会被Compose从Composition中移除；返回时FirstScreen会重新创建，此时用remember创建的scrollState会被重新初始化，导致之前的滚动位置丢失。

解决方案 #

使用rememberSaveable替代remember来保存滚动状态。rememberSaveable会将状态持久化到SavedStateHandle，即使Composable被销毁重建也能恢复状态。

修改FirstScreen中的滚动状态创建代码：

// 替换原来的rememberScrollState()
val scrollState = rememberSaveable { ScrollState(0) }

修改后的完整FirstScreen代码 #

@Composable
fun FirstScreen() {

    var str by remember {
        mutableStateOf("")
    }

    LaunchedEffect(Unit) {
        str = "First Screen\n\n\n" + (1..1000).toList().joinToString()
    }

    // 使用rememberSaveable保存滚动状态
    val scrollState = rememberSaveable { ScrollState(0) }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        Text(
            text = str,
            textAlign = TextAlign.Center
        )
    }
}

原理说明 #

ScrollState本身实现了Saver接口，rememberSaveable会自动利用这个Saver来序列化和反序列化滚动偏移量（scrollOffset）。当FirstScreen重建时，会从SavedState中恢复之前的scrollOffset，从而保持跳转前的滚动位置。

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