综述

        简单一个dmeo搞清如何使用navigation实现页面之间的跳转与参数传递。

开发环境与依赖

AndroidStudio Meerkat

AGP 8.2.2

Gradle 8.11.1

页面导航依赖 implementation("androidx.navigation:navigation-compose:2.7.6")

配置路由导航

        新建文件实现路由导航，指定页面对应的id值与起始页面。

class NavigationDemo : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppNavigation()
        }
    }
}

@Composable
@Preview(showBackground = true)
fun AppNavigation(){
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "welcome"
    ){
        composable("welcome"){
            WelcomeScreen(navController)
        }
        composable("login"){
            LoginScreen(navController)
        }
        composable("home"){
            HomeScreen(navController)
        }
    }
}

页面搭建

         编写三个测试页面。

@Composable
fun WelcomeScreen(
    navController: NavController
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ){
        Text("this is a welcome page")
        Button(
            onClick = {
                navController.navigate("login"){
                }
            }
        ) {
            Text("login in")
        }
    }
}

@Composable
fun LoginScreen(
    navController: NavController,
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue)
    ){
        Text("this is a login page")
        Button(
            onClick = {
                navController.navigate("home/1234"){
                    // 清除栈中包含welcome页面的所有页面
                    popUpTo("welcome"){
                        inclusive = true
                    }
                }
            }
        ) {
            Text("home")
        }
    }
}

@Composable
fun HomeScreen(
    navController: NavController,
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)
    ){
        Text("this is a home page")
        Button(
            onClick = {
                navController.navigate("welcome")
            }
        ) {
            Text("welcome")
        }
    }
}

         至此，可以实现三个页面之间的跳转。

参数传递

路由导航

        传递参数的方式有两种。

@Composable
@Preview(showBackground = true)
fun AppNavigation(){
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "welcome"
    ){
        composable("welcome"){
            WelcomeScreen(navController)
        }
        composable("login/{id}/{fromWelcome}",
            // 使用argument传递多个参数
            arguments = listOf(
                navArgument("id"){type = NavType.IntType;defaultValue=-1},
                navArgument("fromWelcome"){type = NavType.BoolType;defaultValue=false}
            )
        ){
            backStackEntry ->
            LoginScreen(navController,backStackEntry.arguments?.getInt("id"),backStackEntry.arguments?.getBoolean("fromWelcome"))
        }
        composable("home/{userId}"){
            // 使用路径拼接传递参数
            backStackEntry ->
            HomeScreen(navController,backStackEntry.arguments?.getString("userId"))
        }
    }
}

页面搭建

@Composable
fun WelcomeScreen(
    navController: NavController
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Red)
    ){
        val id by remember { mutableIntStateOf(23) }
        val isFromWelcome by remember { mutableStateOf(true) }
        Text("this is a welcome page")
        Button(
            onClick = {
                navController.navigate("login/${id}/${isFromWelcome}"){
                }
            }
        ) {
            Text("login in")
        }
    }
}

@Composable
fun LoginScreen(
    navController: NavController,
    id: Int?,
    fromWelcome: Boolean?
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Blue)
    ){
        Text("this is a login page")
        Button(
            onClick = {
                navController.navigate("home/1234"){
                    // 清除栈中包含welcome页面的所有页面
                    popUpTo("welcome"){
                        inclusive = true
                    }
                }
            }
        ) {
            Text("home")
        }
        Text(id.toString())
        Text(fromWelcome.toString())
    }
}

@Composable
fun HomeScreen(
    navController: NavController,
    string: String?
) {
    Column (
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Yellow)
    ){
        Text("this is a home page")
        Button(
            onClick = {
                navController.navigate("welcome")
            }
        ) {
            Text("welcome")
        }
        Text(string!!)
    }
}