网站建设个人工作总结,三网合一 营销型网站,网页字体尺寸设计,火烈鸟门户网站开发Navigation 快速上手 下面案例简要展示使用 Compose 版本的 Navigation 库来实现两个页面之间的跳转 这是完整的结构#xff08;忽略掉红线划过的那个包#xff09; 安装适用于 kotlin 的 navigation 依赖
dependencies {implementation(androidx.navigation:navigati…Navigation 快速上手 下面案例简要展示使用 Compose 版本的 Navigation 库来实现两个页面之间的跳转 这是完整的结构忽略掉红线划过的那个包 安装适用于 kotlin 的 navigation 依赖
dependencies {implementation(androidx.navigation:navigation-compose:2.4.1)
}编写欲跳转的两个页面
编写 Demo1 页面
子页面使用多个 composable 组件相组合的方法一一装配起来
Demo1main 渲染整个页面他接受一个 NavController 对象用于操纵导航相关的方法 可以注意到 Button 里面的点击事件还没写后续我们写好路由后再回来编写跳转逻辑 Composable
fun Demo1main(navController: NavController) {body(navController)
}Composable
private fun body(navController: NavController) {Column(modifier Modifier.fillMaxSize()) {Button(onClick {// 跳转逻辑}) {Text(text 前往demo2,modifier Modifier.fillMaxWidth(),textAlign TextAlign.Center)}}
}编写 Demo2 页面
依葫芦画瓢
Composable
fun Demo2main(navController: NavController) {body(navController)
}Composable
private fun body(navController: NavController) {Column(modifier Modifier.fillMaxSize()) {Button(onClick {// 这里也写跳转逻辑}) {Text(text 前往demo1,modifier Modifier.fillMaxWidth(),textAlign TextAlign.Center)}}
}路由表配置
编写单例类 RouteConfig 用来存储路由名称等同于 vue-router 中我们设置的 path
后续为便于理解统称为 path
object RouteConfig {// 主页面const val ROUTE_MAIN main// 两个跳转页面const val ROUTE_DEMO1 demo1const val ROUTE_DEMO2 demo2
}总路由
创建文件 MainNav 并在里面实现路由导航的总逻辑
由于我们刚刚入门路由表可以很简单按照以下结构即可
rememberNavController 存储所有 navcontroller 状态NavHost 一个容器便于内部页面的切换在里面注册所有页面
Composable
fun AppNav() {// 存储navigation状态val navController rememberNavController()// navhost容器// startDestination表示起始页的path这里我们指定demo1作为起始页NavHost(navController navController, startDestination RouteConfig.ROUTE_DEMO1) {// 依次传入path并注册三个页面composable(RouteConfig.ROUTE_MAIN) {MainActivity()}composable(RouteConfig.ROUTE_DEMO1) {Demo1main(navController)}composable(RouteConfig.ROUTE_DEMO2) {Demo2main(navController)}}
}主页面调用总路由
对于 kotlin 而言非常简单直接调用定义好的总路由方法即可
因为总路由默认起始页为 demo1故渲染 mainactivity 后就会立即载入 demo1 页面
class MainActivity() : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {DemoComposeTheme {// A surface container using the background color from the themeSurface(modifier Modifier.fillMaxSize(),color MaterialTheme.colors.background) {// 一键调用方便快捷AppNav()}}}}
}跳转逻辑完善
嘿还记得我们之前置空的按钮跳转逻辑吗
我们已经配置完了所有路由为此仅需将以下代码添加到按钮点击事件即可跳转到指定页面了
// 写于demo1页面点击按钮后跳转到demo2页面
navController.navigate(RouteConfig.ROUTE_DEMO2)为便于大家理解现给出 demo1.kt 目前的完整代码
Composable
fun Demo1main(navController: NavController) {body(navController)
}Composable
private fun body(navController: NavController) {Column(modifier Modifier.fillMaxSize()) {Button(onClick {navController.navigate(RouteConfig.ROUTE_DEMO2)}) {Text(text 前往demo2,modifier Modifier.fillMaxWidth(),textAlign TextAlign.Center)}}
}demo2 的跳转逻辑只需要修改对应的 path 即可 目前仅学到了最简单的 navigate 跳转后续还有带参跳转请关注进阶版本
