Android Compose导航页面重复调用问题

问题原因 #

• 直接在PostScreen的Composable函数体内调用postViewModel.listPostBasicInfo()，每次Compose重组时都会执行该方法。如果该方法内部更新了ViewModel的状态（比如MutableStateFlow、LiveData），会再次触发Compose重组，形成循环重组，导致PostScreen被重复调用。
• ViewModel的获取位置错误：在NavigationGraph外部使用by viewModels()获取的ViewModel，生命周期与NavigationGraph所在的Composable绑定，而非当前导航页面的NavBackStackEntry，可能引发额外的状态变化触发重组。
• 原代码存在参数不匹配问题：PostScreen定义仅接收postViewModel，但调用时传入了两个ViewModel参数。

解决方案 #

1. 使用副作用函数执行一次性操作 #

将listPostBasicInfo()的调用放在LaunchedEffect中，确保仅在PostScreen首次组合或指定key变化时执行，避免每次重组都触发：

@Composable
// 修正参数定义，匹配调用时的传参
fun PostScreen(postViewModel: PostViewModel, userViewModel: UserViewModel) {
    Log.d("test", "PostScreen")
    // 使用LaunchedEffect，key为postViewModel确保仅在ViewModel初始化时执行一次
    LaunchedEffect(postViewModel) {
        postViewModel.listPostBasicInfo()
    }
    // 后续可添加使用userViewModel的业务逻辑
}

2. 正确在导航作用域内获取ViewModel #

在composable的lambda中，通过navBackStackEntry.viewModels()获取与当前页面生命周期绑定的ViewModel，而不是在NavigationGraph外部提前获取：

@Composable
fun NavigationGraph(navController: NavHostController) {
    NavHost(navController = navController, startDestination = NavigationRoute.postRoute) {
        composable(NavigationRoute.postRoute) { navBackStackEntry ->
            // 从当前导航栈条目获取ViewModel，生命周期与页面绑定
            val postViewModel = navBackStackEntry.viewModels<PostViewModel>().value
            val userViewModel = navBackStackEntry.viewModels<UserViewModel>().value
            PostScreen(postViewModel, userViewModel)
        }
        composable(NavigationRoute.settingsRoute) { navBackStackEntry ->
            val userViewModel = navBackStackEntry.viewModels<UserViewModel>().value
            // 修正SettingsScreen的参数定义，匹配传参
            SettingsScreen(userViewModel)
        }
    }
}

// 修正SettingsScreen的参数定义
@Composable
fun SettingsScreen(userViewModel: UserViewModel) {
    Log.d("test", "SettingsScreen")
}

3. 优化ViewModel状态更新逻辑 #

如果listPostBasicInfo()内部通过MutableStateFlow更新状态，建议仅在数据变化时更新，避免重复触发重组：

class PostViewModel : ViewModel() {
    private val _postList = MutableStateFlow<List<Any>>(emptyList())
    val postList = _postList.asStateFlow()

    fun listPostBasicInfo() {
        viewModelScope.launch {
            // 模拟网络请求或本地数据获取
            val newPostList = fetchPostData()
            // 仅当新数据与旧数据不同时更新，避免无意义的重组
            if (newPostList != _postList.value) {
                _postList.value = newPostList
            }
        }
    }

    private suspend fun fetchPostData(): List<Any> {
        // 实际业务逻辑
        return emptyList()
    }
}

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