Android Jetpack Compose 导航重组多次

Question

我正在尝试使用jetpack compose。但是当我尝试使用jetpack compose navigation时，我发现导航屏幕被重新组合了多次。以下是我的代码片段。

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoAppTheme {
                // A surface container using the 'background' color from the theme
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = "First") {
                    composable("First") {
                        Log.e("TAG", "First Screen")
                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                            Button(onClick = {
                                navController.navigate("Second")
                            }) {
                                Text(text = "Second Screen")
                            }
                        }
                    }

                    composable("Second") {
                        Log.e("TAG", "Second Screen")
                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

                        }
                    }
                }
            }
        }
    }
}

这是我的日志，

2023-09-25 14:34:09.672 19634-19634 标签 com.example.demoapp => 第一个屏幕

2023-09-25 14:34:09.678 19634-19634 标签 com.example.demoapp => 第二个屏幕

2023-09-25 14:34:09.701 19634-19634 标签 com.example.demoapp => 第一个屏幕

2023-09-25 14:34:09.706 19634-19634 标签 com.example.demoapp => 第二个屏幕

2023-09-25 14:34:10.415 19634-19634 标签 com.example.demoapp => 第二个屏幕

2023-09-25 14:34:10.434 19634-19634 标签 com.example.demoapp => 第二个屏幕

我认为它应该为导航构建一次。

Answer 1

如果您想防止从“第二”屏幕导航回来时重新组合“第一”屏幕，可以使用 RememberSaveable 函数来保留“第一”可组合项的状态。这是您的代码的更新版本：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            DemoAppTheme {
                // A surface container using the 'background' color from the theme
                val navController = rememberNavController()
                NavHost(navController = navController, startDestination = "First") {
                    composable("First") {
                        Log.e("TAG", "First Screen")
                        val firstScreenData = rememberSaveable { mutableStateOf(0) }

                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                            Button(onClick = {
                                navController.navigate("Second")
                            }) {
                                Text(text = "Second Screen")
                            }

                            Text(text = "First Screen Data: ${firstScreenData.value}")
                        }
                    }

                    composable("Second") {
                        Log.e("TAG", "Second Screen")
                        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

                        }
                    }
                }
            }
        }
    }
}