【HarmonyOS4学习笔记】《HarmonyOS4+NEXT星河版入门到企业级实战教程》课程学习笔记(十二)

课程地址: 黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程,一套精通鸿蒙应用开发

(本篇笔记对应课程第 19节)

P19《18.ArkUI组件-页面路由》

以访问京东页面为例,访问过的页面并没有消失,而是进入了页面栈,栈是一个先进后出的结构。访问过的页面会被压入这个栈,当点击返回时会将当前页面弹出页面栈,从而回到上一页面;当不停地访问页面时,页面栈内会被压入很多页面。

页面路由相关的API:

试用一下路由:我们在index页面中添加一些路由,让其能够跳转到不同的案例页面。

在index中添加如下代码:一个 RouterInfo类,以及一个 routers 数组:

将 routes 数组渲染到页面:

ListItem中通过一个自定义构建函数实现:

现在开始添加路由跳转功能啦:

首先需要导入 router,写出router后会有导入提示,选择这个提示后会自动导入。


打开log查看详细错误信息:

报错的原因是:我们需要在 resources/base/profile 下的 main_pages.json 文件中配置页面信息:

是不是我们每次创建文件都要配置对应的页面信息?不是的,我们创建的如果是页面文件,则可以选择 new Page,这样创建出来的页面会自动添加到页面配置中去,就不需要手动去添加这个页面的配置了:


再次测试发现仍然报错"路由失败",因为我们修改了路由配置页面,重启下预览器,再次测试,可以成功跳转了。

接收路由跳转传递过来的参数:

router还有一个比较有用的api,返回前的警告:

总结:

实践:

typescript 复制代码
// index.ets  首页

import router from '@ohos.router'
class RouterInfo {
  // 页面路径
  url:string
  // 页面标题
  title:string

  constructor(url:string, title:string) {
    this.url = url
    this.title = title
  }
}

@Extend(Text) function textStyle(){
  .fontColor('#fff')
  .fontSize(20)
}

@Entry
@Component
struct Index {
  // @State message: string = 'Hello World'
  @State routers:RouterInfo[] = [
    new RouterInfo('pages/ImagePage','图片查看'),
    new RouterInfo('pages/ItemsPage','商品列表'),
    new RouterInfo('pages/StatePage','Jack的信息'),
    new RouterInfo('pages/PropPage','任务列表'),
  ]


  build() {
    Row() {
      Column({space:30}) {
        Text('页面列表')
          .fontSize(32)
          .fontWeight(FontWeight.Bold)

        List({space:20}){
          ForEach(this.routers,(item,index)=>{
            ListItem(){
              this.routerItem(item,index)
            }
          })
        }
      }
      .width('100%')
      .padding(20)
    }
    .height('100%')
  }

  // 局部自定义构建函数,不需要 function 关键字
  @Builder routerItem(item:RouterInfo,index){
    Row(){
      Text((index+1).toString())
        .textStyle()
      Text(item.title)
        .textStyle()
    }
      .width('100%')
      .height(40)
      .padding(10)
      .justifyContent(FlexAlign.SpaceBetween)
      .backgroundColor('#36D')
      .borderRadius(20)
      .shadow({radius:8, color:'#4f0000',offsetX:2, offsetY:2})
      .onClick(()=>{
        router.pushUrl({
          url: item.url,
          params: {id: index}
        },
          router.RouterMode.Single,
          err => {
            if(err){
              console.log(`路由失败了!code:${err.code},message:${err.message}`)
            }
          }
        )
      })
  }
}
typescript 复制代码
// CommonComponents.tes   Header 公共组件

import router from '@ohos.router'
@Component
export struct Header{
  @State params:any = router.getParams()

  private title:ResourceStr
  build(){
    Row(){
      Image($r('app.media.icon_back'))
        .width(40)
        .onClick(()=>{
          router.showAlertBeforeBackPage({
            message:'确定返回吗?'
          })

          router.back()
        })

      if(this.params && this.title){
        Text(`${this.params.id} . ${this.title}`)
          .fontSize(28)
      }


      Blank()

      Image($r('app.media.icon_search'))
        .width(40)
    }
    .width('100%')
    .height(60)
    .padding({left:14, right:14})
    .justifyContent(FlexAlign.Start)
  }
}
相关推荐
uppp»4 分钟前
深入理解 Java 反射机制:获取类信息与动态操作
java·开发语言
CSDN_PBB3 小时前
[STM32 - 野火] - - - 固件库学习笔记 - - - 十五.设置FLASH的读写保护及解除
笔记·stm32·学习
m0_748256144 小时前
SpringBoot
java·spring boot·后端
阿华的代码王国4 小时前
【从0做项目】Java搜索引擎(3)
java·搜索引擎·项目
Mr.朱鹏4 小时前
针对Feign客户端请求体参数处理问题
java·jvm·spring boot·spring·spring cloud·maven·intellij-idea
涛粒子6 小时前
Spring Bean 生命周期的执行流程
java·后端·spring
刘_sy6 小时前
使用EasyExcel和多线程实现高效数据导出
java·excel·easyexcel·批量导出excel
梦幻通灵6 小时前
IDEA通过Contince接入Deepseek
java·ide·intellij-idea
web150850966416 小时前
SQL 建表语句详解
java·数据库·sql
遇到困难睡大觉哈哈7 小时前
鸿蒙Harmony-UIAbility内状态-LocalStorage详细介绍
华为·harmonyos·鸿蒙