Navigation 组件

目前Compose MultiPlatform已经发布。那么使用Compose编写UI也可以实现跨平台。对于Compose界面的编写，需要涉及到页面跳转。我们处理页面跳转的方式，主要有2种方式。一种是多Activity的，默认Android中提供的处理页面的跳转使用的startActivity方式。另一种是单个Activity的。显然，如果要实现多平台的Compose UI，就必须使用后者。Android Navigation组件就提供了这种页面导航方式的功能。确切来说Navigation组件，是一个导航框架也支持acitivty、fragment、view等组件的导航。本章主要介绍Navigation组件在Compose 下使用的场景。

1.导入依赖库

android 提供了多个场景下，Navigation组件的使用方式。对特定的场景只需要导入对应的依赖库即可。这里我们使用implementation "androidx.navigation:navigation-compose:nav_version

dependencies {
  def nav_version = "2.7.7"

  // 使用Java语言
  implementation "androidx.navigation:navigation-fragment:$nav_version"
  implementation "androidx.navigation:navigation-ui:$nav_version"
  
  // 使用Kotlin语言
  implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
  implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

  // 特性模块支持（如果跳转页面分布在多个模块时使用）
  implementation "androidx.navigation:navigation-dynamic-features-fragment:$nav_version"

  // 测试导航模块
  androidTestImplementation "androidx.navigation:navigation-testing:$nav_version"

  //使用Jetpack Compose
  implementation "androidx.navigation:navigation-compose:$nav_version"
}

2.三大要素

主机（NavHost）相当于Navigation组件的容器，所有要导航的页面都要显示在这个容器中。
图表（NavGraph）这是一种数据结构，用于描述所有的导航“目的地”页面怎么联系的。比如：是从哪个页面跳转到哪个页面的。
控制器（NavController）用于管理导航“目的地”页面。

在下面的MainActivity页面中，我们首先在setContent中加载导航的NavHost。这个NavHost下，我们需要设置navController和startDestination参数。后面用一个尾随的lambda表达式来表示NavGraph 的定义。其中composable用来定义导航的页面，这里我们定义了“main”、“second”两个页面。然后我们需要把这两个页面使用navController.navigate的方式来跳转到对应的页面。

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            NavHost(navController = navController, startDestination = "main"){
                composable("main"){
                    MainScreen(modifier = Modifier.fillMaxSize()){
                        navController.navigate("second")
                    }
                }
                composable("second"){
                    SecondScreen(modifier = Modifier.fillMaxSize()){
                        navController.navigate("main")
                    }
                }
            }
        }
    }
}

@Composable
fun MainScreen(modifier: Modifier,navSecondPage:()->Unit){
    Column(modifier = modifier){
        Text(text = "Main页面")
        Button(onClick = { navSecondPage.invoke() }) {
            Text(text = "跳转到Second页面")
        }
    }
}

@Composable
fun SecondScreen(modifier: Modifier,navMainPage:()->Unit){
    Column(modifier = modifier){
        Text(text = "Second页面")
        Button(onClick = { navMainPage.invoke() }) {
            Text(text = "跳转到Main页面")
        }
    }
}

3.移除堆栈页面

使用popUpTo()方法，表示导航到目的地("main"页面)之前，把之前堆栈中的("main"页面)上方所有堆栈页面进行移除。inclusive表示是否还包括堆栈中的("main"页面)。设置为inclusive = true，表示之前堆栈中存在的"main"页面也一并移除。

在SecondScreen中设置popUpTo("main")。当我们从 main页面开始，点击跳转到second页面，这时候堆栈中存在main -> second。
如果设置popUpTo("main")时，在second页面点击跳转到main页面，这时候堆栈中只有main。
如果没有设置popUpTo("main")时，在second页面点击跳转到main页面，这时候堆栈中存在
main ->second ->main。

composable("second"){
        SecondScreen(modifier = Modifier.fillMaxSize()){
            navController.navigate("main"){
                popUpTo("main"){
                    inclusive = true
                    saveState = true
                }
            }
        }
    }