Jetpack Compose中LaunchEffect引发UI切换异常问题排查

核心问题1：添加LaunchEffect后UI无法切换 #

你的代码中ViewModel的创建方式错误，导致每次Compose重组都会重新实例化ViewModel，丢失状态：

// 错误写法：每次重组都会创建新的VariableViewModel实例
val viewModel = VariableViewModel()

当你添加LaunchedEffect(key1 = viewModel.setLastCurrentPage)后，点击按钮会修改setLastCurrentPage的值，触发Compose重组。此时新创建的ViewModel会将uiState重置为初始值ScreenName.FIRST，所以看起来UI始终无法切换。

核心问题2：移到ViewModel后LaunchEffect不触发 #

你修改changeUIi()后，切换UI时设置setLastCurrentPage的值，但存在两个问题：

1. 首次切换到SECOND时，setLastCurrentPage被设为false（与初始值一致），没有发生变化，LaunchEffect的key未更新，因此不触发。
2. 若ViewModel仍未正确持有（还是每次重组都重新创建），状态变化会被覆盖，也无法触发LaunchEffect。

修复步骤 #

1. 正确持有ViewModel实例 #

在Compose中，必须使用viewModel()方法获取ViewModel，确保它在重组时不会被重新创建：

@Composable
@OptIn(ExperimentalFoundationApi::class)
fun SaveVariable() {
    // 正确写法：使用viewModel()获取生命周期感知的ViewModel实例
    val viewModel: VariableViewModel = viewModel()
    val pagerState = rememberPagerState()
    
    LaunchedEffect(key1 = pagerState) {
        snapshotFlow { pagerState.currentPage }.collect { page ->
            viewModel.currentIndex = page
        }
    }
    
    // 调整后的LaunchEffect
    LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
        if (viewModel.setLastCurrentPage) {
            Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
            // 重置状态，以便下次触发
            viewModel.setLastCurrentPage = false
        }
    }
    
    LgcTheme {
        SaveVariableItem(viewModel.currentIndex, viewModel.uiState, pagerState) {
            viewModel.changeUIi()
            viewModel.setLastCurrentPage = true
        }
    }
}

2. 确保LaunchEffect能正确触发 #

如果你希望每次切换UI时都打印currentIndex，可以选择两种方案：

方案A：以uiState作为LaunchEffect的key

直接监听UI状态的变化，无需额外变量：

LaunchedEffect(key1 = viewModel.uiState) {
    Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
}

方案B：使用setLastCurrentPage作为触发标记

保持setLastCurrentPage作为触发开关，每次触发后重置：

• ViewModel中的changeUIi()无需修改setLastCurrentPage，仅在点击按钮时设置：

fun changeUIi() {
    uiState = if (uiState == ScreenName.FIRST) {
        ScreenName.SECOND
    } else {
        ScreenName.FIRST
    }
}

• 点击按钮时设置标记：

SaveVariableItem(...) {
    viewModel.changeUIi()
    viewModel.setLastCurrentPage = true
}

• LaunchEffect中打印后重置标记：

LaunchedEffect(key1 = viewModel.setLastCurrentPage) {
    if (viewModel.setLastCurrentPage) {
        Log.e(">> LaunchedEffect", "${viewModel.currentIndex}")
        viewModel.setLastCurrentPage = false
    }
}

内容的提问来源于stack exchange，提问作者Compose Learner