首页 > 解决方案 > 使用 Jetpack Compose 更改导航时如何缓存数据?

问题描述

我想在一些带有导航的@Composable 页面之间更改屏幕,但导航后@Composable 中的数据会消失。如果数据是从 Internet 获取的,则意味着我每次更改导航时都需要获取数据并刷新 UI。那么导航后如何缓存数据呢?

我知道一种解决方法是使用 ViewModel,但它微不足道且麻烦。有没有简单的方法来做到这一点?

class MainActivity : ComponentActivity() {
    @ExperimentalPermissionsApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            TestTheme {
                Scaffold(bottomBar = {
                    BottomNavigation {
                        BottomNavigationItem(
                            selected = true,
                            onClick = { navController.navigate("test") },
                            icon = { Icon(painter = painterResource(id = R.drawable.ic_android_black_24dp), contentDescription = null) })
                        BottomNavigationItem(
                            selected = true,
                            onClick = { navController.navigate("test2") },
                            icon = { Icon(painter = painterResource(id = R.drawable.ic_android_black_24dp), contentDescription = null) })

                    }
                }) {
                    val vm by viewModels<WifiVM>()

                    NavHost(navController = navController, startDestination = "test") {
                        composable(route = "test") { Test() }
                        composable(route = "test2") { Test2() }
                    }
                }
            }
        }
    }
}

@Composable
fun Test() {
    val state = remember{ mutableStateOf(0) }    // dismiss after navigation
    Box(modifier = Modifier.fillMaxSize()) {
        Text(text = "test")
        Text(text = state.value.toString(), modifier = Modifier
            .align(Alignment.Center)
            .clickable {
                state.value += 1
            })
    }
}

@Composable
fun Test2() {
    val state = remember{ mutableStateOf(0) }    // dismiss after navigation
    Box(modifier = Modifier.fillMaxSize()) {
        Text(text = "test2")
        Text(text = state.value.toString(), modifier = Modifier
            .align(Alignment.Center)
            .clickable {
                state.value += 1
            })
    }
}

标签: androidkotlinandroid-jetpackandroid-jetpack-compose

解决方案


推荐阅读