ViewModel状态变更后Jetpack Compose重组异常（状态回滚）问题

核心问题 #

你的代码中存在一个致命逻辑错误：每次QuranScreen重组时，都会用路由参数pageNum强制覆盖ViewModel的currentPage状态。这导致你通过HorizontalPager切换页面修改currentPage后，重组触发时又会被路由参数的初始值改回去，造成状态回滚、组件无响应的假象。

修复步骤 #

1. 修正ViewModel初始化逻辑，避免重复覆盖状态

将QuranScreen中直接赋值currentPage的代码替换为LaunchedEffect，确保仅在路由参数pageNum真正变化时才更新ViewModel状态，而非每次重组都执行：

@Composable
fun QuranScreen(
    navController: NavController,
    pageNum: String?,
    quranViewModel: QuranViewModel = viewModel()
) {
    // 仅在pageNum变化时更新ViewModel的currentPage，避免重组时覆盖状态
    LaunchedEffect(pageNum) {
        pageNum?.let {
            quranViewModel.currentPage = it
        }
    }

    val currentPage = quranViewModel.currentPage
    val page = quranViewModel.quranData.get(Integer.parseInt(currentPage) - 1)
    val selectedTab = quranViewModel.selectedTab

    Column {
        when (selectedTab) {
            "page" -> PagesContainer(
                quranData = quranViewModel.quranData,
                currentPage = currentPage,
                onPageChanged = { newPage ->
                    quranViewModel.currentPage = newPage
                }
            )
            "benefits" -> Benefits(page.benefits, page.pageNum)
            "yt" -> YouTube(page.ytLink.split("v=").last())
        }
    }
}

2. 让PagerState与ViewModel状态双向联动

当前PagerState的initialPage仅在首次创建时生效，切换Tab后无法自动同步ViewModel的currentPage状态。添加监听逻辑，确保currentPage变化时，Pager自动跳转到对应页面：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagesContainer(
    quranData: List<QuranPage>,
    currentPage: String,
    onPageChanged: (String) -> Unit
) {
    val targetPage = Integer.parseInt(currentPage) - 1
    val pagerState = rememberPagerState(
        initialPage = targetPage,
        initialPageOffsetFraction = 0f
    ) {
        quranData.size
    }

    // 监听currentPage变化，同步更新Pager的显示位置
    LaunchedEffect(currentPage) {
        if (pagerState.currentPage != targetPage) {
            pagerState.animateScrollToPage(targetPage)
        }
    }

    LaunchedEffect(pagerState) {
        snapshotFlow { pagerState.currentPage }.collect { page ->
            Log.d("Page change", "Page changed to $page")
            onPageChanged("${page + 1}")
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        HorizontalPager(
            state = pagerState,
            key = { quranData[it].pageNum },
            pageSize = PageSize.Fill
        ) { index ->
            SinglePage(quranData[index].pageNum)
        }
    }
}

可选优化：将currentPage改为Int类型 #

ViewModel中currentPage用String类型会导致频繁的类型转换，容易出错。建议改为Int类型并增加边界检查：

class QuranViewModel : ViewModel() {
    val quranData: List<QuranPage> = QuranStore.getQuranData();
    private var _selectedTab by mutableStateOf("page")
    var selectedTab: String
        get() = _selectedTab
        set(value) { _selectedTab = value }

    private var _currentPage by mutableStateOf(1)
    var currentPage: Int
        get() = _currentPage
        set(value) { 
            // 确保页码在有效范围内
            _currentPage = value.coerceIn(1, quranData.size) 
        }
}

对应调整QuranScreen和PagesContainer中的类型转换逻辑即可，代码会更简洁健壮。

内容的提问来源于stack exchange，提问作者M.KH