android - 如何解决 Compose Navigation 重复创建目的地组合项的问题？

Question

MainActivity包含五个使用 Compose 构建的页面。导航会重复创建目的地，导致屏幕重复加载。我在ArticlePage.kt的两个地方添加了Log来打印日志。下面是各个操作对应的日志。

1. 第一代打开日志的应用是

   D/ArticlePage：创建ArticlePage页面

   D/ArticlePage：创建ArticlePage页面

2. 执行刷新操作后的日志

   I/ArticlePage：文章数据变化

   I/ArticlePage：文章数据变化

3. 导航到其他屏幕时记录

   D/ArticlePage：创建ArticlePage页面

   I/ArticlePage：文章数据变化

   D/ArticlePage：创建ArticlePage页面

   I/ArticlePage：文章数据变化

4. 再次切换到 ArticlePage 时记录

   D/ArticlePage：创建ArticlePage页面

   I/ArticlePage：文章数据变化

   D/ArticlePage：创建ArticlePage页面

   I/ArticlePage：文章数据变化

   D/ArticlePage：创建ArticlePage页面

   I/ArticlePage：文章数据变化

因为每次日志打印文章数据变化，就意味着我的屏幕需要刷新一次，屏幕中的动画会重复加载。使用影响很大。如何设置避免页面重复加载。

MainActivity.kt

HomePages.forEachIndexed { index, screen ->
            selected = currentDestination == screen.route,
            onClick = {
                navController.navigate(screen.route) {
                        popUpTo(navController.graph.startDestinationId) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }

MainActivityNavigation.kt

NavHost(navController, startDestination = HomePage.ArticlePage.route) {
        composable(HomePage.ArticlePage.route) {
            val viewModel:ArticleVM = hiltViewModel()
            ArticlePage(activity,viewModel) //The parameter activity is MainActivity
        }
    }

文章页面.kt

这是一个包含 View 和 Compose 的混合屏幕。FragmentArticlesBinding 包含一个 RecyclerView 和刷新控件小部件

    @Composable
    fun ArticlePage(
        activity: MainActivity,
        articleVM: ArticleVM,
    ) {

        Log.d("ArticlePage", "ArticlePage page is created")

        AndroidViewBinding(factory = FragmentArticlesBinding::inflate) {
                ...... //init refresh

                // Directly monitor article data changes
                articleVM.articles.observe(activity) {
                    Log.i("ArticlePage", "articles data change")
                    ......... //other operations
                }
            }
    }

文章VM.kt

@HiltViewModel
class ArticleVM @Inject constructor() : BaseVM() {
    // article List declare
    val articles = MutableLiveData<ReturnList<ArticleDetail>>()
}

标签： androidandroid-jetpack-composeandroid-jetpack-navigation