Android Compose中如何在TabLayout中分离LazyColumn滚动状态

核心问题分析 #

• 第一种方案中，单个LazyColumn复用导致滚动状态在Tab间共享，切换Tab时新Tab会继承旧的滚动位置。
• 第二种方案中，重复的LazyColumn组件在Tab切换时，未被选中的组件会被销毁，导致滚动状态丢失，同时存在代码冗余。

解决方案：为每个Tab维护独立滚动状态+复用组件 #

通过为每个Tab创建独立的LazyListState，并复用同一个ItemList组件，既能避免滚动状态共享，又能保留各自的滚动位置，同时消除代码重复。

步骤1：修改ItemList组件，支持传入自定义滚动状态 #

将LazyListState作为参数传入，让每个Tab可以使用专属的滚动状态：

@Composable
fun ItemList(
    items: List<Item>,
    listState: LazyListState
) {
    LazyColumn(state = listState) {
        items(items) { item ->
            ItemUi(item)
        }
    }
}

步骤2：在屏幕组件中为每个Tab创建并保存独立滚动状态 #

使用rememberSaveable结合LazyListState.Saver持久化滚动状态，确保配置变化和Tab切换时状态不丢失：

@Composable
fun MyScreen(
    selectedTabIdx: Int,
    itemList1: List<Item>,
    itemList2: List<Item>,
    onTabSelected: (Int) -> Unit
) {
    // 为Tab1创建独立滚动状态
    val listState1 = rememberSaveable(saver = LazyListState.Saver) {
        LazyListState()
    }
    // 为Tab2创建独立滚动状态
    val listState2 = rememberSaveable(saver = LazyListState.Saver) {
        LazyListState()
    }

    TabUi(
        selectedTab = selectedTabIdx,
        onTabSelected = onTabSelected
    )

    // 根据选中Tab渲染对应列表，传入专属滚动状态
    when(selectedTabIdx) {
        0 -> ItemList(items = itemList1, listState = listState1)
        1 -> ItemList(items = itemList2, listState = listState2)
    }
}

补充：修正ViewModel中的错误 #

原ViewModel中onTabSelected方法存在变量名错误，修正为：

class MyViewModel: ViewModel() {
    val items1: SnapshotStateList<Item> = mutableStateListOf()
    val items2: SnapshotStateList<Item> = mutableStateListOf()

    var selectedTabIdx: Int by mutableStateOf(0)
        private set

    fun onTabSelected(idx: Int) {
        selectedTabIdx = idx // 原代码为selectedTab，修正为正确的变量名
    }
}

可选优化：使用IndexedStack保留所有Tab状态 #

如果希望未选中的Tab也保持组件实例（避免重组开销），可以使用IndexedStack包裹列表组件，这样所有Tab的滚动状态都会被持续保留：

@Composable
fun MyScreen(
    selectedTabIdx: Int,
    itemList1: List<Item>,
    itemList2: List<Item>,
    onTabSelected: (Int) -> Unit
) {
    val listState1 = rememberSaveable(saver = LazyListState.Saver) {
        LazyListState()
    }
    val listState2 = rememberSaveable(saver = LazyListState.Saver) {
        LazyListState()
    }

    Column(modifier = Modifier.fillMaxSize()) {
        TabUi(
            selectedTab = selectedTabIdx,
            onTabSelected = onTabSelected
        )
        IndexedStack(
            index = selectedTabIdx,
            modifier = Modifier.weight(1f)
        ) {
            ItemList(items = itemList1, listState = listState1)
            ItemList(items = itemList2, listState = listState2)
        }
    }
}

这种方式的缺点是会同时加载所有Tab的内容，适合数据量较小的场景；如果数据量较大，建议使用之前的when分支方案，仅加载当前选中Tab的内容。

内容的提问来源于stack exchange，提问作者dev.farmer