鸿蒙next Navigation导航学习

  目前鸿蒙官网已经已经在逐步放弃@ohos.router下面放一张官网的截图:

这里做一个对比:

业务场景NavigationRouter
一多能力支持,Auto模式自适应单栏跟双栏显示不支持
跳转指定页面pushPath & pushDestinationpushUrl & pushNameRoute
跳转HSP中页面支持支持
跳转HAR中页面支持支持
跳转传参支持支持
获取指定页面参数支持不支持
传参类型传参为对象形式传参为对象形式,对象中暂不支持方法变量
跳转结果回调支持支持
跳转单例页面支持支持
页面返回支持支持
页面返回传参支持支持
返回指定路由支持支持
页面返回弹窗支持,通过路由拦截实现showAlertBeforeBackPage
路由替换replacePath & replacePathByNamereplaceUrl & replaceNameRoute
路由栈清理clearclear
清理指定路由removeByIndexes & removeByName不支持
转场动画支持支持
自定义转场动画支持支持,动画类型受限
屏蔽转场动画支持全局和单次支持 设置pageTransition方法duration为0
geometryTransition共享元素动画支持(NavDestination之间共享)不支持
页面生命周期监听UIObserver.on('navDestinationUpdate')UIObserver.on('routerPageUpdate')
获取页面栈对象支持不支持
路由拦截支持通过setInercption做路由拦截不支持
路由栈信息查询支持getState() & getLength()
路由栈move操作moveToTop & moveIndexToTop不支持
沉浸式页面支持不支持,需通过window配置
设置页面标题栏(titlebar)和工具栏(toolbar)支持不支持
模态嵌套路由支持不支持

作为替代者,我个人认为Navigation 是面向未来的即跨端设备最好的路由方式,其中它解决了目前移动端最头疼的折叠屏的适配方式,当然你也会说解决移动端折叠屏还有其他的方式,但是目前就我所知华为这是最好的方式,下面我们简单的介绍一下Navigation的使用方式,从整个逻辑上来看和Jetpack 的路由也很像。下面详细介绍一下使用的方式:

第一步:首先是在主页面创建对应的容器:

这里红框标红的就是核心代码。有了对应的容器后,即可添加对应的跳转代码。这里我们使用pushPathByName()方法,这里要进行一个区别,就是pushPath 和 pushPathByName方法

对于我们初学者我们只需要关注对应的跳转方式就可以了,这里我的跳转方式如下:

第二步:

这样我们就完成了,需要调整的页面的相关工作,下面我们来看我们需要去的界面的相关配置:

第三步:

我们首页要声明入口的方法这里特别注意,我们的入口方法要和我们的json文件的名称保持一致:

第四步:

我们创建一个router_pages.json 文件,然后完成如下的操作方式:

这样就可以引入我们需要的json文件了,最后我们去json文件里操作。

这里一定要注意:buildFunction这个参数,后面的value一定要和去哪里的那个界面保持一致,不然很容易出现跳转失败的问题。

同样后续的跳转也是类似这样操作。好了一个简单的跳转方式就简单的介绍完了,后面会继续补充,我们对 Navigation的详细理解,包括和主页Tab 之间的处理,还有对代码的封装,如果避免json文件写错的情况导致问题排查的难度,还有如何进行自定义修改官方的UI样式。其他的像跳转动画之类的,我这里建议参考官方文档,官方文档介绍的相当详细。

组件导航 (Navigation)(推荐)-设置组件导航和页面路由-UI开发 (ArkTS声明式开发范式)-ArkUI(方舟UI框架)-应用框架 - 华为HarmonyOS开发者 (huawei.com)

<think>好的,我现在需要帮助用户在DevEco Studio中实现底部导航栏点击切换的功能。首先,用户提供的引用中有关于Android Studio和HarmonyOS的参考资料,特别是引用[2]提到了使用Fragment实现切换,引用[3]和[5]涉及HarmonyOS的组件和SDK版本。因此,我需要基于ArkTS和ArkUI框架来设计解决方案。 首先,我需要确认DevEco Studio中创建底部导航栏的常用方法。在HarmonyOS中,通常使用Tabs组件或者自定义布局来实现底部导航。查看引用[3],提到了使用.sticky属性,但这里可能更适合使用Tabs或者自定义Row容器放置按钮。 接下来,考虑页面切换。在ArkUI中,页面内容切换可以使用条件渲染或者Navigation组件。根据引用[2]中的Fragment切换思路,可能对应到ArkUI中的组件动态加载。因此,使用状态变量currentIndex来跟踪当前选中的选项卡,并通过条件语句渲染对应的内容。 然后,处理点击事件。每个底部按钮需要绑定onClick事件,当点击时更新currentIndex的值,从而触发UI更新。同时,按钮的样式(如颜色)应根据当前选中状态变化,这可以通过动态类名或样式绑定实现。 代码结构方面,主页面应包含顶部内容区、底部导航栏。内容区使用条件渲染展示不同组件,底部使用Row布局包含多个按钮。每个按钮的点击事件设置currentIndex为对应索引,并切换选中样式。 最后,测试代码时需要注意SDK版本是否符合要求,引用[1]和[5]指出需要NEXT Developer Beta1及以上版本,确保用户的环境正确。同时,参考引用[4]的预览器调试方法,用户可以实时查看布局变化。 需要验证代码是否符合ArkTS语法,例如使用@State装饰器管理状态,组件结构是否正确。可能还需要添加图标和文字,提升用户体验,如引用[2]中的示例那样。此外,考虑后续优化,如使用Tabs组件简化实现,或添加页面切换动画。 总结步骤:创建状态变量管理当前页,设计底部导航按钮结构,绑定点击事件和样式,条件渲染内容区域。确保代码兼容指定的SDK版本,并参考HarmonyOS的ArkUI最佳实践。</think>在DevEco Studio中实现底部导航栏点击切换功能,可以通过ArkTS结合ArkUI组件实现。以下是基于HarmonyOS NEXT的示例代码及分步说明: ```typescript // 主页面代码(Index.ets) @Entry @Component struct Index { @State currentIndex: number = 0 // 当前选中页索引 build() { Column() { // 内容区域 Column() { if (this.currentIndex === 0) { Text('首页内容').fontSize(20) } else if (this.currentIndex === 1) { Text('消息页面').fontSize(20) } else { Text('我的页面').fontSize(20) } } .height('90%') // 底部导航栏 Row() { Column() { Image(this.currentIndex === 0 ? $r('app.media.home_active') : $r('app.media.home_normal')) .onClick(() => this.currentIndex = 0) Text('首页').fontColor(this.currentIndex === 0 ? '#007DFF' : '#666') } .layoutWeight(1) Column() { Image(this.currentIndex === 1 ? $r('app.media.msg_active') : $r('app.media.msg_normal')) .onClick(() => this.currentIndex = 1) Text('消息').fontColor(this.currentIndex === 1 ? '#007DFF' : '#666') } .layoutWeight(1) Column() { Image(this.currentIndex === 2 ? $r('app.media.mine_active') : $r('app.media.mine_normal')) .onClick(() => this.currentIndex = 2) Text('我的').fontColor(this.currentIndex === 2 ? '#007DFF' : '#666') } .layoutWeight(1) } .width('100%') .height(60) .backgroundColor('#F5F5F5') } } } ``` 实现步骤说明: 1. 使用`@State`装饰器声明响应式变量`currentIndex`,用于跟踪当前选中的导航项 2. 页面布局分为上下两部分: - 顶部内容区域(占90%高度)使用条件渲染: ```tsx if (this.currentIndex === 0) { ... } ``` - 底部导航栏使用`Row`布局平分空间,每个导航项包含图标和文字 3. 点击事件处理: - 每个导航项的`Image`和`Text`都绑定`onClick`事件 - 点击时更新`currentIndex`的值,触发界面重新渲染 4. 样式切换: - 图标使用条件表达式切换激活/普通状态 - 文字颜色根据当前选中状态变化
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值