Jetpack Compose切换Tab时如何保留滚动位置与分页数据

问题根源分析 #

1. ViewModel共享导致数据重置：原代码中所有Tab共用同一个MainScreenViewModel，切换Tab时修改requestedTabId会触发分页流重新创建，之前加载的分页数据全部丢失。
2. PagerState未持久化：VerticalPager的PagerState定义在FeedScreen内部，切换Tab时不可见的FeedScreen会被Compose回收，滚动位置随之丢失。
3. Tab与Pager页面不匹配：原HorizontalPager中传递给FeedScreen的是selectedTabIndex而非当前page值，可能导致页面与Tab状态不一致。

具体解决方案 #

1. 为每个Tab创建独立ViewModel

每个Tab需要维护自己的分页数据，通过ViewModel的key参数为不同Tab创建独立实例：

// 重构为FeedViewModel，每个Tab对应一个实例
class FeedViewModel : ViewModel() {
    private val _tabId = MutableStateFlow(-1)
    
    // 根据tabId创建独立分页流，并缓存数据
    private val _feedItems = _tabId
        .filter { it != -1 }
        .distinctUntilChanged()
        .flatMapLatest { tabId ->
            Pager(
                config = PagingConfig(pageSize = 20),
                pagingSourceFactory = { FeedPagingSource(tabId) } // 传入tabId作为API查询参数
            ).flow
        }
        .cachedIn(viewModelScope) // 缓存分页数据，避免重复请求

    val feedItems: Flow<PagingData<PostData>> = _feedItems

    fun setTabId(tabId: Int) {
        if (_tabId.value != tabId) {
            _tabId.value = tabId
        }
    }
}

2. 在MainScreen中持久化每个Tab的PagerState

将每个Tab对应的VerticalPager状态保存在MainScreen中，避免切换时丢失：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MainScreen(
    modifier: Modifier = Modifier,
    categoryData: CategoryData?
) {
    if (categoryData == null) return
    val items = categoryData.categories

    val horizontalPagerState = rememberPagerState(pageCount = { items.size })
    var selectedTabIndex by rememberSaveable { mutableIntStateOf(0) }

    // 双向同步Tab选中状态与HorizontalPager页面
    LaunchedEffect(horizontalPagerState.currentPage) {
        selectedTabIndex = horizontalPagerState.currentPage
    }
    LaunchedEffect(selectedTabIndex) {
        if (horizontalPagerState.currentPage != selectedTabIndex) {
            horizontalPagerState.scrollToPage(selectedTabIndex)
        }
    }

    // 为每个Tab保存独立的VerticalPager状态
    val verticalPagerStates = rememberSaveable(items.size) {
        List(items.size) {
            rememberPagerState(pageCount = { 0 }) // 初始页计数设为0，后续由分页数据更新
        }
    }

    Box(Modifier.fillMaxSize()) {
        HorizontalPager(
            state = horizontalPagerState,
            userScrollEnabled = false
        ) { page ->
            val tabId = items[page].id
            FeedScreen(
                tabId = tabId,
                pagerState = verticalPagerStates[page]
            )
        }

        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .scrollable(rememberScrollState(), Orientation.Horizontal),
            verticalAlignment = Alignment.CenterVertically
        ) {
            itemsIndexed(items) { index, currentTab ->
                CustomTab(
                    title = currentTab.name,
                    isSelected = selectedTabIndex == index,
                    onClick = { selectedTabIndex = index }
                )
            }
        }
    }
}

3. 重构FeedScreen使用外部传入的PagerState

移除FeedScreen内部的PagerState定义，改用MainScreen传递的状态，并绑定对应Tab的ViewModel：

@OptIn(ExperimentalFoundationApi::class, ExperimentalPermissionsApi::class)
@androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
@Composable
fun FeedScreen(
    tabId: Int,
    pagerState: PagerState
) {
    // 用tabId作为key，获取当前Tab的独立ViewModel
    val viewModel: FeedViewModel = viewModel(key = tabId.toString())

    // 初始化TabId（仅在首次创建时执行）
    LaunchedEffect(tabId) {
        viewModel.setTabId(tabId)
    }

    val feedItems = viewModel.feedItems.collectAsLazyPagingItems()

    // 根据分页数据更新VerticalPager的总页数
    LaunchedEffect(feedItems.itemCount) {
        pagerState.pageCount = feedItems.itemCount
    }

    VerticalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxSize()
            .background(LokalTheme.colors.baseBlack)
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }
            ) {},
        beyondBoundsPageCount = 3
    ) { page ->
        val item = feedItems[page]
        when (item) {
            is PostData.VideoData -> { /* 渲染视频卡片 */ }
            is PostData.MagazineCardData -> { /* 渲染杂志卡片 */ }
        }
    }
}

核心优化点 #

• 独立ViewModel实例：通过viewModel(key = tabId.toString())确保每个Tab拥有独立的分页数据缓存，切换时不会互相干扰。
• 持久化PagerState：将每个Tab的滚动状态保存在MainScreen的rememberSaveable列表中，避免页面回收导致状态丢失。
• 分页数据缓存：使用cachedIn(viewModelScope)缓存分页流数据，切换Tab时无需重新请求已加载的内容。

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