当前位置: 首页 > news >正文

HarmonyOS4 页面路由

Index.ets:

import router from '@ohos.router'class RouterInfo {// 页面路径url: string// 页面标题title: stringconstructor(url: string, title: string) {this.url = urlthis.title = title}
}@Entry // 入口組件
@Component
struct Index {@State message: string = '页面列表'// 路由列表数组private routers: RouterInfo[] = [// app Log: 路由失败, errorCode: 100002 errMsg:Uri error. The uri of router is not exist.// main_pages.json配置new RouterInfo('pages/ImagePage', '图片查看案例'),new RouterInfo('pages/PropPage', '任务列表案例')]build() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).height(80).onClick(() => {this.message = 'Hello ArkTS!';})List({ space: 15 }) {ForEach(this.routers,(router, index) => {ListItem() {this.RouterItem(router, index + 1)}})}.layoutWeight(1).alignListItem(ListItemAlign.Center).width('100%')}.width('100%').height('100%')}@BuilderRouterItem(r: RouterInfo, i: number) {Row() {Text(i + '.').fontSize(20).fontColor(Color.White)Blank()Text(r.title).fontSize(20).fontColor(Color.White)}.width('90%').padding(12).backgroundColor('#38f').borderRadius(20).shadow({radius: 6, color: '#4F000000', offsetX: 2, offsetY: 2}).onClick(() => {// router跳转router.pushUrl({url: r.url,params: {id: i}},router.RouterMode.Single,err => {if (err) {console.log(`路由失败, errorCode: ${err.code} errMsg:${err.message}`)}})})}
}/*** struct:自定义组件 可复用的UI单元* 装饰器:用来装饰类结构、方法、变量* @Component:标记自定义组件* @Entry:标记当前组件是入口组件* @State:标记一个变量是状态变量,值变化时会触发UI更新* build():UI描述,其内部以声明式方式描述UI结构* 内置组件:ArkUI提供的组件,比如容器组件如Row、Column* 基础组件:自带样式和功能的页面元素,如Text* 属性方法:设置组件的UI样式* 事件方法:设置组件的事件回调* 组件通用属性、特有属性(图片插值)*/

http://www.lryc.cn/news/336823.html

相关文章:

  • ShardingSphere再回首
  • 第七篇:3.6 其他评估考虑/4.审计指南/5. 通用报告规范/6.披露指南、参考标准及其他 - IAB/MRC及《增强现实广告效果测量指南1.0》
  • 函数、指针和数组的相互运用(C语言)
  • .Net Core/.Net 6/.Net 8,一个简易的消息队列
  • OpenHarmony4.0分布式任务调度浅析
  • element-ui backtop 组件源码分享
  • MongoDB快照(LVM)业务场景应用实战
  • 3D开发工具HOOPS:推动汽车行业CAD可视化发展
  • Centos安装MySQL提示公钥尚未安装
  • FebHost:英国.UK域名简介
  • SQL Serve---查询
  • RabbitMQ3.13.x之十一_RabbitMQ中修改用户密码及角色tags
  • Taro打包生成不同目录
  • 2024-04-08 NO.5 Quest3 手势追踪进行 UI 交互
  • PaddleDetection 项目使用说明
  • leetcode解题思路分析(一百五十五)1352 - 1358 题
  • 如何将普通maven项目转为maven-web项目
  • LeetCode 226. 翻转二叉树
  • 【ArcGIS Pro二次开发】(85):Aspose.Cells中的Excel操作
  • 基于java+springboot+vue实现的兴顺物流管理系统(文末源码+Lw)23-287
  • pytorch view、expand、transpose、permute、reshape、repeat、repeat_interleave
  • uni-app实现下拉刷新
  • vue ts 应用梳理
  • CUDA12.4文档-全文翻译
  • 【C 数据结构】循环链表
  • Python列表
  • 谈谈系列之金融直播展业畅想
  • 【C 数据结构】双向链表
  • Leetcode刷题之消失的数字(C语言版)
  • LeetCode654:最大二叉树