Compose | UI组件(十三) | Navigation - 页面导航

---

前言

关于大前端，不管是Android还是IOS，Web端都会涉及到页面之间的跳转或传值

今天我们要讲的就是Compose中及其重要的组件 Navigation (页面导航)

---

Navaigation 的核心概念和组件的更详细说明

Compose Navigation 是一个用于 Jetpack Compose 的导航组件，它提供了简单而强大的 API 来处理页面跳转和用户界面交互。以下是 Compose Navigation 的核心概念和组件的更详细说明：

1. NavController：
   • 定义：NavController 是导航组件的中心 API，负责控制页面导航的流程。
   • 作用：它维护了 Navigation 内部关于页面的堆栈、状态信息、导航图。
   • 创建：通过 rememberNavController() 方法创建 NavController 实例。
2. NavHost：
   • 定义：NavHost 是一个 Composable 函数，用于承载导航的页面，同时也是承载导航页面的容器。
   • 参数：NavHost 需要两个必传参数，一个是 NavController，一个是起始路由地址。
   • 作用：内部持有 NavController，在页面切换时渲染 UI。通过 composable() 函数构建路线（节点）。
3. Screen：
   • 定义：Screen 是表示一个单独的、完整的 UI 屏幕的组件。可以将其视为一个页面，包含了一个完整的 UI 布局。
   • 创建：通过 Screen 组件创建 Screen 实例。
4. Route：
   • 定义：Route 是导航路径的抽象表示，用于定义页面之间的跳转关系。
   • 创建与管理：通过 NavHost 和 NavController 定义和管理多个 Route。
5. Params：
   • 定义：Params 是传递给目标 Screen 的数据。
   • 传递方式：通过 NavController 的 navigate() 方法传递 Params。在目标 Screen 中接收和使用这些参数。
6. Backstack：
   • 定义：Backstack 是保存和恢复导航状态的机制。
   • 管理方式：通过 NavController 的 backstack 属性，可以管理用户的导航历史，并执行后退操作。
7. Transitions：
   • 定义：Transitions 是用于页面切换的动画效果。
   • 提供与自定义：Compose Navigation 提供了一组默认的过渡动画，也可以自定义过渡效果，以提供流畅的用户体验。
8. Lazy Entry：
   • 定义：Lazy Entry 是一种懒加载技术，允许延迟加载一些不立即需要的页面。
   • 用途：优化性能和资源使用。
9. Graph:
   • 定义：统一所有的Destination信息，以及可能的跳转路径
   • 用途：Navigation需要收集各节点之间的跳转关系，因此NavDestinotion需要集中在一起，统一由Graph管理
10. NavLink：类似于 Web 中的锚点，可以用来实现页面内的跳转。

这些核心概念和组件为开发者提供了构建复杂的导航结构和用户界面交互的工具，使得在 Jetpack Compose 应用中实现高效的页面跳转和数据传递变得简单而强大。通过合理使用这些概念和组件，可以创建出具有良好用户体验的应用程序。

---

真实案例带你一步一步了解 Navaigation

第一步，新建多个页面

多个页面相当于传统View里面的Fragment

HomeScreen.kt

@Composable
fun HomeScreen(navController: NavController){
   
Column(modifier = Modifier.fillMaxSize(),
       verticalArrangement = Arrangement.Center,
       horizontalAlignment = Alignment.CenterHorizontally) {
   

        Text(modifier = Modifier.clickable {
   },
            text  = "Home",
            color = MaterialTheme.colorScheme.primary,
            style = MaterialTheme.typography.displayLarge)

        Text(modifier = Modifier.padding(top = 150.dp).clickable {
   },
            text  = "Login/SinUp",
            color = Color.Black,
            style = MaterialTheme.typography.headlineMedium)
   }
}

LoginScreen.kt

@Composable
fun LoginScreen(navController: NavController){
   
    Column(modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally) {
   

        Text(modifier = Modifier.clickable {
   },
            text  = "Login",
            color = Color.Magenta,
            style = MaterialTheme.typography.displayLarge)

        Text(modifier = Modifier.padding(top = 150.dp).clickable {
   },
            text  = "Go Back",
            color = Color.Black,
            style = MaterialTheme.typography.headlineMedium)
    }
}

SignUpScreen.kt

@Composable
fun SignUpScreen(navController: NavController){
   
    Box(modifier = Modifier.fillMaxSize(<