[Android]Jetpack Compose页面跳转和传值

一、页面跳转和返回

1.添加 Navigation 依赖

在你的 build.gradle （Module）文件中, 添加 Navigation Compose 依赖。

1. dependencies {
2.     implementation ("androidx.navigation:navigation-compose:2.5.3")
3. }

复制代码

2.创建跳转页面

接下来，创建两个简单的 Composable 函数，分别表示两个页面。

• 使用 navController.navigate("routeName") 来触发跳转
  
• 使用 NavController.popBackStack() 方法返回到上一页
  

1. import androidx.compose.material.Button
2. import androidx.compose.material.Text
3. import androidx.compose.runtime.Composable
4. import androidx.compose.ui.platform.LocalContext
5. import androidx.navigation.NavController
7. // 主页面
8. @Composable
9. fun HomeScreen(navController: NavController) {
10.     Column {
11.         Button(onClick = { navController.navigate("detailScreen") }) {
12.             Text("跳转到详情页")
13.         }
14.         Text("这里是首页")
15.     }
16. }
18. // 详情页面
19. @Composable
20. fun DetailScreen(navController: NavController) {
21.     Column {
22.         Button(onClick = { navController.popBackStack() }) {
23.             Text("返回")
24.         }
25.         Text("这里是详情页面")
26.     }
27. }

复制代码

3.设置 Navigation Graph

界说一个 Navigation Graph 来管理你的应用导航。这包罗界说所有的导航路由和相关的 Composable 函数。

• 使用 NavController 来管理页面的跳转
  
• NavHost 是一个 Composable 容器，它包含所有的导航路由。
  
• 每个路由由一个唯一的字符串标识，并关联到一个 Composable 函数。
  
• startDestination指定从哪个页面开始
  

1. import androidx.compose.runtime.Composable
2. import androidx.navigation.compose.NavHost
3. import androidx.navigation.compose.composable
4. import androidx.navigation.compose.rememberNavController
6. // 应用的导航设置
7. @Composable
8. fun AppNavigation() {
9.     val navController = rememberNavController() // 创建 NavController
11.     // 设置 NavHost，管理导航内容
12.     NavHost(navController = navController, startDestination = "homeScreen") {
13.         composable("homeScreen") { // 首页路由
14.             HomeScreen(navController)
15.         }
16.         composable("detailScreen") { // 详情页路由
17.             DetailScreen(navController)
18.         }
19.     }
20. }

复制代码

这里只是功能演示，直接就用上面这样硬编码了。

延伸示例：
现实开发中，一般将路由名称界说成罗列，避免输入错误，甚至还可以为路由关联页面标题。

1. import androidx.compose.runtime.Composable
2. import androidx.navigation.compose.NavHost
3. import androidx.navigation.compose.composable
4. import androidx.navigation.compose.rememberNavController
5. import com.randomdt.www.business.home.HomeScreen
6. import com.randomdt.www.business.modules.protocol.ProtocolScreen
7. import com.randomdt.www.config.TextConfig
8. import com.randomdt.www.main.SharedViewModel
9. import com.randomdt.www.business.guide.GuideScreen
11. // 应用的导航设置
12. // 跳转：navController.navigate("detailScreen/Hello, Detail!")
13. // 返回：navController.popBackStack()
14. @Composable
15. fun AppNavigation(viewModel: SharedViewModel, start: RouteList, onComplete: (Boolean) -> Unit = { _ -> Unit }) {
16.     val navController = rememberNavController() // 创建 NavController
18.     // 设置 NavHost，管理导航内容
19.     NavHost(navController = navController, startDestination = start.description) {
20.         composable(route = RouteList.Home.description) { // 首页路由
21.             HomeScreen(navController)
22.         }
24.         composable(route = RouteList.Guide.description) { // 引导页路由
25.             GuideScreen(navController, onGuideComplete = onComplete)
26.         }
28.         composable(route = RouteList.TermsOfUse.description) { // 用户协议
29.             ProtocolScreen(navController, titleText = RouteList.TermsOfUse.description, termsText = TextConfig.termsOfUseText())
30.         }
32.         composable(route = RouteList.PrivacyPolicy.description) { // 隐私政策
33.             ProtocolScreen(navController, titleText = RouteList.PrivacyPolicy.description, termsText = TextConfig.privacyPolicyText())
34.         }
35.     }
36. }
38. // 路由列表
39. // 可以用来关联一个导航标题名称
40. enum class RouteList(val description: String) {
41.     Home("homeScreen"),
42.     Guide("guideScreen"),
43.     TermsOfUse("Terms Of Use"),
44.     PrivacyPolicy("Privacy Policy"),
45. }

复制代码

1. class MainActivity : ComponentActivity() {
2.     override fun onCreate(savedInstanceState: Bundle?) {
3.         super.onCreate(savedInstanceState)
4.         PrefsManager.init(this)
6.         setContent {
7.             RandomdtTheme {
8.                 Surface(
9.                     modifier = Modifier.fillMaxSize(),
10.                     color = MaterialTheme.colorScheme.background
11.                 ) {
12.                     MainContent()
13.                 }
14.             }
15.         }
16.     }
17. }
19. @Composable
20. fun MainContent() {
21.     val viewModel = SharedViewModel()
22.     val isDidGuideState = remember { mutableStateOf(PrefsManager.get<Boolean>(PrefKey.IS_DID_GUIDE)) }
23.     if (isDidGuideState.value) {
24.         AppNavigation(viewModel, start = RouteList.Home)
25.     } else {
26.         AppNavigation(viewModel, start = RouteList.Guide, onComplete = { isDidGuideCompleted ->
27.             isDidGuideState.value = isDidGuideCompleted
28.         })
29.     }
30. }

复制代码

 
4.在主题中使用 AppNavigation

在你的主要 Composable 函数或者 Activity 中，调用 AppNavigation 函数来启动整个应用的导航系统。

1. import androidx.activity.ComponentActivity
2. import androidx.activity.compose.setContent
3. import androidx.compose.material.MaterialTheme
4. import androidx.compose.material.Surface
5. import androidx.compose.runtime.Composable
7. class MainActivity : ComponentActivity() {
8.     override fun onCreate(savedInstanceState: Bundle?) {
9.         super.onCreate(savedInstanceState)
10.         setContent {
11.             MyApp()
12.         }
13.     }
14. }
16. @Composable
17. fun MyApp() {
18.     MaterialTheme {
19.         Surface {
20.             AppNavigation()
21.         }
22.     }
23. }

复制代码

二、页面间传值

1.传递数据到新页面

假设我们需要从 HomeScreen 向 DetailScreen 传递一个字符串参数。首先，我们需要在导航图中界说参数。
(1).修改导航图以接受参数

1. import androidx.navigation.compose.NavHost
2. import androidx.navigation.compose.composable
3. import androidx.navigation.compose.rememberNavController
4. import androidx.navigation.NavType
5. import androidx.navigation.compose.navArgument
7. // 应用的导航设置
8. @Composable
9. fun AppNavigation() {
10.     val navController = rememberNavController() // 创建 NavController
12.     // 设置 NavHost，管理导航内容
13.     NavHost(navController = navController, startDestination = "homeScreen") {
14.         composable("homeScreen") { // 首页路由
15.             HomeScreen(navController)
16.         }
18.         composable(
19.             route = "detailScreen/{message}",
20.             arguments = listOf(navArgument("message") {
21.                 type = NavType.StringType // 参数的类型
22.             })
23.         ) { backStackEntry -> // 详情页路由
24.             DetailScreen(
25.                 navController = navController,
26.                 message = backStackEntry.arguments?.getString("message") ?: "No message"
27.             )
28.         }
29.     }
30. }

复制代码

(2).修改 HomeScreen 以传递参数

1. @Composable
2. fun HomeScreen(navController: NavController) {
3.     Column {
4.         Button(onClick = { navController.navigate("detailScreen/Hello, Detail!") }) {
5.             Text("跳转到详情页")
6.         }
7.         Text("这里是首页")
8.     }
9. }

复制代码

(3).在 DetailScreen 接收和显示传入的数据

1. @Composable
2. fun DetailScreen(navController: NavController, message: String) {
3.     Column {
4.         Button(onClick = { navController.popBackStack() }) {
5.             Text("返回")
6.         }
7.         Text("这里是详情页面: $message")
8.     }
9. }

复制代码

2.使用 ViewModel 回传数据

(1).怎样创建ViewModel？

在使用 ViewModel 和 Jetpack Compose 联合的场景中，如果 ViewModel 中的数据是以相应式的方式管理的（例如使用 MutableState、LiveData 或 Flow），那么当数据更新时，与这些数据相关的 Compose UI 组件将会自动重新渲染以反映新的数据状态。
使用 MutableState:

MutableState 是 Jetpack Compose 中用于状态管理的一种方式，当状态发生变化时，所有使用该状态的 Composable 函数会自动重新绘制。

1. class ExampleViewModel : ViewModel() {
2.     val message = mutableStateOf("Initial Message")
4.     fun updateMessage(newMessage: String) {
5.         message.value = newMessage
6.     }
7. }
9. @Composable
10. fun ExampleScreen(viewModel: ExampleViewModel) {
11.     Text(text = viewModel.message.value)
12. }

复制代码

使用 LiveData:

LiveData 同样可以被用于状态管理，在 Jetpack Compose 中，你可以使用 observeAsState() 扩展函数将 LiveData 转换为 Compose 可用的状态。

1. class ExampleViewModel : ViewModel() {
2.     private val _message = MutableLiveData("Initial Message")
3.     val message: LiveData<String> = _message
5.     fun updateMessage(newMessage: String) {
6.         _message.value = newMessage
7.     }
8. }
10. @Composable
11. fun ExampleScreen(viewModel: ExampleViewModel) {
12.     val message by viewModel.message.observeAsState()
13.     message?.let {
14.         Text(text = it)
15.     }
16. }

复制代码

使用 Flow:

Flow 是另一种在 Kotlin 中管理异步数据流的方式。在 Compose 中，你可以使用 collectAsState() 将 Flow 转换为 Compose 可用的状态。

1. class ExampleViewModel : ViewModel() {
2.     private val _message = MutableStateFlow("Initial Message")
3.     val message: StateFlow<String> = _message.asStateFlow()
5.     fun updateMessage(newMessage: String) {
6.         _message.value = newMessage
7.     }
8. }
10. @Composable
11. fun ExampleScreen(viewModel: ExampleViewModel) {
12.     val message = viewModel.message.collectAsState()
13.     Text(text = message.value)
14. }

复制代码

 (2).界说一个 ViewModel

1. class MainViewModel : ViewModel() {
2.     val returnedData = mutableStateOf("")
4.     fun setReturnData(data: String) {
5.         returnedData.value = data
6.     }
7. }

复制代码

在现实的应用开发中，使用单一的 MainViewModel 来管理所有页面间的数据传递并不是最佳实践。这种做法可能会导致 ViewModel 过于臃肿和混乱，特别是在大型应用中，这可能会导致维护困难和扩展问题。
 理想的做法是使用多个 ViewModel，每个 ViewModel 管理特定页面或功能模块的状态和逻辑。

• 页面级 ViewModel：每个页面或每组相关页面可以有自己的 ViewModel。这样，页面间的数据传递可以通过共享的更高级别 ViewModel 来实现，或者通过事件和回调来举行。
  
• 共享 ViewModel：对于需要跨多个页面共享数据的情况，可以使用一个共享的 ViewModel。这个 ViewModel 可以被多个页面访问，用于存储和管理共享数据。这通常通过依赖注入框架如 Hilt 或 Dagger 实现。
  

示例改进:

1. class HomeViewModel : ViewModel() {
2.     // Home-specific data and logic
3. }
5. class DetailViewModel : ViewModel() {
6.     // Detail-specific data and logic
7.     val returnedData = mutableStateOf("")
9.     fun setReturnData(data: String) {
10.         returnedData.value = data
11.     }
12. }
14. class SharedViewModel : ViewModel() {
15.     // Data and logic shared between multiple screens
16. }

复制代码

(3).让 AppNavigation 能接收 ViewModel

1. @Composable
2. fun AppNavigation(viewModel: MainViewModel) {
3.     val navController = rememberNavController() // 创建 NavController
5.     // 设置 NavHost，管理导航内容
6.     NavHost(navController = navController, startDestination = "homeScreen") {
7.         composable("homeScreen") { // 首页路由
8.             HomeScreen(
9.                 navController = navController,
10.                 viewModel = viewModel
11.             )
12.         }
14.         composable(
15.             route = "detailScreen/{message}",
16.             arguments = listOf(navArgument("message") {
17.                 type = NavType.StringType // 参数的类型
18.             })
19.         ) { backStackEntry -> // 详情页路由
20.             DetailScreen(
21.                 navController = navController,
22.                 message = backStackEntry.arguments?.getString("message") ?: "No message",
23.                 viewModel = viewModel
24.             )
25.         }
26.     }
27. }

复制代码

(4).将 ViewModel 传递给 AppNavigation

1. @Composable
2. fun MyApp(viewModel: MainViewModel) {
3.     MaterialTheme {
4.         Surface {
5.             AppNavigation(viewModel)
6.         }
7.     }
8. }
10. class MainActivity : ComponentActivity() {
11.     override fun onCreate(savedInstanceState: Bundle?) {
12.         super.onCreate(savedInstanceState)
13.         setContent {
14.             val viewModel = MainViewModel()
15.             MyApp(viewModel)
16.         }
17.     }
18. }

复制代码

(5).返回页面中使用 ViewModel 来生存数据

1. @Composable
2. fun HomeScreen(navController: NavController, viewModel: MainViewModel) {
3.     Column {
4.         Button(onClick = { navController.navigate("detailScreen/Hello, Detail!") }) {
5.             Text("跳转到详情页")
6.         }
7.         Text("这里是首页。返回数据=${viewModel.returnedData.value}")
8.     }
9. }
11. // 详情页面
12. @Composable
13. fun DetailScreen(navController: NavController, message: String, viewModel: MainViewModel) {
14.     Column {
15.         Button(onClick = {
16.             // 保存数据
17.             viewModel.setReturnData("Returned from DetailScreen")
18.             navController.popBackStack()
19.         }) {
20.             Text("设置数据并返回")
21.         }
22.         Text("这里是详情页面: $message")
23.     }
24. }

复制代码

3.使用事件回调和状态提升回传数据

在 Jetpack Compose 中使用状态提升（State Hoisting）的模式时，通常是将状态管理的责任留给上层组件（通常是状态的拥有者），而不是让各个子组件直接修改共享状态。这种模式有几个关键的优点：

• 单一本相来源（Single Source of Truth）: 状态被保存在一个组件内部，所有对状态的修改都通过这个组件举行，这有助于避免差别组件间状态不一致的问题。
  
• 可猜测性与可维护性: 当状态的更新逻辑会合在一个地方时，更容易追踪状态的变化，调试和维护也更为方便。
  
• 解耦: 子组件不需要知道状态是怎样被管理的，它们只关心怎样显示数据和怎样将用户的输入通过回调传递出去。这使得组件更加机动和独立。
  

(1).创建共享状态

首先，我们在包含导航逻辑的AppNavigation中创建一个共享状态。这个状态将被HomeScreen和DetailScreen共同访问和修改。

1. @Composable
2. fun AppNavigation() {
3.     val navController = rememberNavController()
4.     var sharedData by remember { mutableStateOf("Initial Data") } // 共享状态
6.     NavHost(navController = navController, startDestination = "homeScreen") {
7.         composable("homeScreen") {
8.             HomeScreen(
9.                 navController = navController,
10.                 data = sharedData,
11.                 onNavigateToDetail = { navController.navigate("detailScreen") }
12.             )
13.         }
14.         composable("detailScreen") {
15.             DetailScreen(
16.                 initialData = sharedData,
17.                 onReturnData = { newData ->
18.                     sharedData = newData
19.                     navController.popBackStack()
20.                 }
21.             )
22.         }
23.     }
24. }

复制代码

(2).创建 HomeScreen

在HomeScreen中，我们展示当前的数据，并提供一个按钮来跳转到DetailScreen。

1. @Composable
2. fun HomeScreen(navController: NavController, data: String, onNavigateToDetail: () -> Unit) {
3.     Column(modifier = Modifier.fillMaxSize().padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
4.         Text(text = "Current Data: $data", style = MaterialTheme.typography.headlineMedium)
5.         Spacer(Modifier.height(20.dp))
6.         Button(onClick = onNavigateToDetail) {
7.             Text("Go to DetailScreen")
8.         }
9.     }
10. }

复制代码

(3).创建 DetailScreen

DetailScreen允许用户修改数据，并通过回调函数将新数据回传给AppNavigation，从而更新共享状态，并返回HomeScreen。

1. @Composable
2. fun DetailScreen(initialData: String, onReturnData: (String) -> Unit) {
3.     var text by remember { mutableStateOf(initialData) }
5.     Column(modifier = Modifier.fillMaxSize().padding(16.dp), horizontalAlignment = Alignment.CenterHorizontally) {
6.         TextField(
7.             value = text,
8.             onValueChange = { text = it },
9.             label = { Text("Enter new data") }
10.         )
11.         Spacer(Modifier.height(8.dp))
12.         Button(
13.             onClick = { onReturnData(text) }
14.         ) {
15.             Text("Update and Return")
16.         }
17.     }
18. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。