Jetpack Compose使用navigation实现页面导航与参数传递

综述

        简单一个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!!)}
}