目前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
}
}
}
}
