JetpackCompose Navigation导航实现流程

目录
  • Navigation 快速上手
  • 编写欲跳转的两个页面
  • 路由表配置
  • 总路由
  • 主页面调用总路由
  • 跳转逻辑完善

Navigation 快速上手

下面案例简要展示使用 Compose 版本的 Navigation 库来实现两个页面之间的跳转

这是完整的结构(忽略掉红线划过的那个包)

编写欲跳转的两个页面

编写 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 = "demo1"
    const 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 theme
                Surface(
                    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 跳转,后续还有带参跳转,请关注进阶版本!

到此这篇关于JetpackCompose Navigation导航实现流程的文章就介绍到这了,更多相关JetpackCompose Navigation内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android JetpackCompose使用教程讲解

    目录 概况 开启新工程 文件结构 根结构 拆分方法 官方四节课教程细节剖析 data class 组件代码翻译 单例类 适配器的替代品 简单小动画 概况 compose 摒弃了原生开发模式中的 xml,代码结构类似于 flutter compose 仅支持 kotlin,虽然这玩意语法糖多但是也不难学 compose 可以通过极短的代码行数构建完善页面 开启新工程 首先请去 android 官网下载 android studio: 官网下载速度是正常的,别担心: 之后根据提示安装 android

  • Android中导航组件Navigation的实现原理

    对于导航组件的使用方式不是本文的重点,具体使用可以参考官方文档,导航组件框架是通过fragment来实现的,其核心类主要可以分为三个NavGraph.NavHostController.NavHostFragment,这三个类的作用分别是: NavGraph: 解析导航图xml获取到的对象,其内部主要维护了一个集合用来存储目的地,当导航到目的地时,会传递进来一个id,这个id可能导航图xml中fragment的id,也有可能是fragment节点下action节点的id,如果是action节点的

  • Android Jetpack组件Navigation导航组件的基本使用

    目录 1.Navigation 基本概念 2.Navigation 使用入门 2.1 添加Navigation依赖 2.2 创建导航图 2.3 导航图中添加目的地Fragment 2.4 Activity添加 NavHost 2.5 LoginFragment 代码编写 2.6 welcomeFragment 代码编写 总结 本篇主要介绍一下 Android Jetpack 组件 Navigation 导航组件的 基本使用 当看到 Navigation单词的时候 应该就大概知道 这是一个关于导航

  • Android Jetpack导航组件Navigation创建使用详解

    目录 引言 依赖项 创建导航图 导航宿主 导航到目的地 传递参数 NavigationUI 多模块导航 引言 导航是指支持用户导航.进入和退出应用中不同内容片段的交互.Android Jetpack 的导航组件可实现导航,无论是简单的按钮点击,还是应用栏和抽屉式导航栏等更为复杂的模式,该组件均可应对. 依赖项 def nav_version = "2.5.2" implementation "androidx.navigation:navigation-fragment-kt

  • Android开发之React Navigation 导航栏样式调整+底部角标消息提示

    五一佳节匆匆而过,有人选择在外面看人山人海,有人选择宅在家中度过五一,也有人依然坚守在第一线,致敬! 这是坚持学习react-native的第二篇文章,可能会迟到,但是绝不会缺席,这篇要涉及到的是react-navigation,也是rn社区主推的一个导航库. 网上关于react-navigation的基本使用也是一抓一大把,这里对于它的使用不做过多介绍,主要记录使用过程中的其他问题. 因为android 和iOS 手机的不同,导航栏的显示也不太一样,而这篇文章会尽量的配置属性,让两端的导航栏样

  • JavaScript制作楼层导航效果流程详解

    目录 本期目标 1. 功能实现 1.1 结构层 1.2 样式层 1.3 行为层 1.3.1 楼层跳转 1.3.2 楼层监听 2. 效果预览 3. 项目代码 本期目标 使用JavaScript制作楼层导航效果,实现两个功能: 楼层跳转 楼层监听 1. 功能实现 1.1 结构层 <div id="box" class="box"> <ul class="list"> <li class="content-par

  • iOS App开发中导航栏的创建及基本属性设置教程

    文件目录如下:基本导航顺序: root -> First -> Second -> Third.其中,FirstViewController作为 navigation堆栈的rootview 1.创建navigation 如果是想直接把navigation导航作为项目一开始的跟视图,把RootViewController.h文件里的nav属性放到AppDelegate.h里即可,再把RootViewController.m文件里的action的代码复制到 AppDelegate.m里的di

  • BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

    bootstrap框架.导航条.下拉菜单.轮播广告carousel.栅格系统布局.标签页tabs.模态框.菜单定位的个人总结,具体详情如下所示: bootstrap框架 <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

  • Android BottomNavigationBar底部导航控制器使用方法详解

    最近Google在自己推出的Material design中增加了Bottom Navigation导航控制.Android一直没有官方的导航控制器,自己实现确实是五花八门,有了这个规定之后,就类似苹果的底部Toolbar,以后我们的APP就会有一致的风格,先看一张效果: 这是官方在Material design中给出一张图,确实很不错. 1.BottomNavigationBar的下载地址 https://github.com/Ashok-Varma/BottomNavigation 2.使用

  • bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)

    本文算是bootstrap学习使用的年底大总结,供大家参考,具体内容如下 bootstrap框架 BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢. <!DOCTYPE html> <html lang="zh-cn"><!-- 语言设置 --> <head> <meta charset="utf-8"> <meta http-equi

  • 详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫: 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程:全局的, 单

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

    #在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate

  • 微信小程序实现页面浮动导航

    一.前言 做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中. 二.功能 页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部. 三.实现 wxml代码: <view class='container'> <view class='navigation {{pageVariable.isFloat == true ? "float-navigation":""}}'> <

随机推荐

其他