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

风浅月明

已于 2024-04-23 22:56:14 修改

阅读量5.8k

点赞数 43

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android

于 2024-04-23 16:13:31 首次发布

本文链接：https://blog.csdn.net/wsyx768/article/details/138116856

本文介绍了在Android应用中使用JetpackCompose进行页面跳转和参数传递的方法，包括添加Navigation依赖，创建和管理路由，以及使用ViewModel进行数据管理和页面间通信，同时探讨了状态提升的概念和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面跳转和返回

1.添加 Navigation 依赖

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

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

2.创建跳转页面

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

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

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalContext
import androidx.navigation.NavController

// 主页面
@Composable
fun HomeScreen(navController: NavController) {
    Column {
        Button(onClick = { navController.navigate("detailScreen") }) {
            Text("跳转到详情页")
        }
        Text("这里是首页")
    }
}

// 详情页面
@Composable
fun DetailScreen(navController: NavController) {
    Column {
        Button(onClick = { navController.popBackStack() }) {
            Text("返回")
        }
        Text("这里是详情页面")
    }
}

3.设置 Navigation Graph

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

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

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

// 应用的导航设置
@Composable
fun AppNavigation() {
    val navController = rememberNavController() // 创建 NavController

    // 设置 NavHost，管理导航内容
    NavHost(navController = navController, startDestination = "homeScreen") {
        composable("homeScreen") { // 首页路由
            HomeScreen(navController)
        }
        composable("detailScreen") { // 详情页路由
            DetailScreen(navController)
        }
    }
}

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

延伸示例：

实际开发中，一般将路由名称定义成枚举，避免输入错误，甚至还可以为路由关联页面标题。

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.randomdt.www.business.home.HomeScreen
import com.randomdt.www.business.modules.protocol.ProtocolScreen
import com.randomdt.www.config.TextConfig
import com.randomdt.www.main.SharedViewModel
import com.randomdt.www.business.guide.GuideScreen

// 应用的导航设置
// 跳转：navController.navigate("detailScreen/Hello, Detail!")
// 返回：navController.popBackStack()
@Composable
fun AppNavigation(viewModel: SharedViewModel, start: RouteList, onComplete: (Boolean) -> Unit = { _ -> Unit }) {
    val navController = rememberNavController() // 创建 NavController

    // 设置 NavHost，管理导航内容
    NavHost(navController = navController, startDestination = start.description) {
        composable(route = RouteList.Home.description) { // 首