JetpackCompose Navigation导航实现流程

更新时间：2023年01月04日 15:08:50 作者：知奕奕

Navigation是Jetpack用于Android导航的组件，作用是处理页面跳转，以及页面跳转过程中的交互。使用Navigation，你就需要为每个页面设定一条唯一路径，它是一个String常量，形式是DeepLink的样子，从一个页面跳转到另一个页面，它通过输入目的地的路径进行转跳

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

ViewPager+PagerAdapter实现带指示器的引导页
这篇文章主要为大家详细介绍了ViewPager+PagerAdapter实现带指示器的引导页，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
Android实现页面跳转
这篇文章主要为大家详细介绍了Android实现页面跳转，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
Android AIDL中Map参数传递的问题详解
这篇文章主要给大家介绍了关于Android AIDL中Map参数传递问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友下面来一起看看吧。
2017-12-12
Android编程设计模式之抽象工厂模式详解
这篇文章主要介绍了Android编程设计模式之抽象工厂模式,结合实例形式详细分析了Android抽象工厂模式的概念、原理、使用方法及相关注意事项,需要的朋友可以参考下
2017-12-12
Android Compose实现联系人列表流程
声明式UI，更简单的自定义，实时带交互的预览功能Compose并不是类似于Recyclerview的高级控件，而是直接抛弃了View，ViewGroup那套东西，从上到下鲁了一套全新的框架，直白点说就是它的渲染机制，布局机制，触摸算法，以及UI具体写法全都是新的
2023-03-03
RecyclerView上拉加载封装代码
这篇文章主要为大家详细介绍了RecyclerView上拉加载封装代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
flutter FadeTransition实现透明度渐变动画
这篇文章主要为大家详细介绍了flutter FadeTransition实现透明度渐变动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Android动画之渐变动画(Tween Animation)详解 (渐变、缩放、位移、旋转)
这篇文章主要介绍了Android动画之渐变动画(Tween Animation)用法,结合实例形式详细分析了Android渐变动画Tween Animation实现渐变,缩放,位移,旋转等技巧,需要的朋友可以参考下
2016-01-01
Android实现今日头条订阅频道效果
这篇文章主要为大家详细介绍了Android实现今日头条订阅频道效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
Kotlin类对象class初始化与使用
Kotlin 是一种追求简洁的语言，在类上也下了不少功夫，放弃了很多c++ 中类非常复杂的概念，其实对于类可以这样来理解，为了复用的方便性和完整性，我们把变量和函数组合在一起，形成了类的概念
2022-12-12