HarmonyOS4 页面路由

Index.ets:

import router from '@ohos.router'

class RouterInfo {
  // 页面路径
  url: string
  // 页面标题
  title: string

  constructor(url: string, title: string) {
    this.url = url
    this.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%')
  }

  @Builder
  RouterItem(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样式
 * 事件方法:设置组件的事件回调
 * 组件通用属性、特有属性(图片插值)
 */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/536775.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

StylizedGS: Controllable Stylization for 3D Gaussian Splatting

StylizedGS: Controllable Stylization for 3D Gaussian Splatting StylizedGS:3D高斯溅射的可控样式化 Dingxi Zhang, Zhuoxun Chen, Yu-Jie Yuan, Fang-Lue Zhang, Zhenliang He, Shiguang Shan, and Lin Gao1 张定西,陈卓勋,袁玉洁&#x…

LabVIEW无线快速存取记录器(WQAR)测试平台

LabVIEW无线快速存取记录器(WQAR)测试平台 随着民用航空业的迅速发展,航空安全的保障日益成为公众和专业领域的关注焦点。无线快速存取记录器(WirelessQuick Access Recorder, WQAR)作为记录飞行数据、监控飞行品质的…

Kafka—ISR机制

ISR机制 Kafka 中的 ISR(In-Sync Replicas)机制是一种用于确保数据可靠性和一致性的重要机制。ISR 是一组副本,它包括分区的领导者(Leader)和追随者(Follower)副本,这些副本与领导者…

Redis(二十)五大经典类型源码

文章目录 面试题源码核心Redis基本的数据结构(骨架)Redis数据库的实现Redis服务端和客户端实现其他 K-V实现怎样实现键值对(key-value)数据库的传统五大基本数据类型和新五大数据类型 5大数据结构底层C语言源码分析示例redisObject五大数据结构解析定义Debug Object keyString …

用Python接单,一单800块虽然不多,但真的能够挣!

当今收入低于5000的人至少占到40%,完全不够养活一家人,而且很多小伙伴其实空余时间比较多,特别是大学生,零花钱又不够花,都想靠业余时间找点轻松的活增加收入。但是缺没门路,为此结合我多年编程开发经验&am…

【React】Ant Design社区扩展库之分割面板:react-resizable-panels

主角:react-resizable-panels 简介:来之Ant Design官方文档社区精选组件 1、效果 2、环境 react-resizable-panels: ^2.0.16next: 14.1.3react: ^18 3、安装 # npm npm install react-resizable-panels# yarn yarn add react-resizable-panels# pnpm …

python 如何向上取整

python向上取整 方法: Python match.ceil函数 ceil(x)函数是向上取整,即取大于等于x的最接近整数。 import math math.ceil(float(1)/2)

品牌软文怎么写?媒介盒子分享

品牌软文是品牌传播的主要方式。高质量的品牌软文能够帮助企业塑造正面的品牌形象,提高品牌知名度和影响力,扩大目标消费者范围。接下来媒介盒子就和大家聊聊:如何写好品牌软文。 一、 确立品牌独特点 品牌独特性是品牌能够与行业内其他品牌…

Offline RL : Efficient Planning in a Compact Latent Action Space

ICLR 2023 paper Intro 采用Transformer架构的Planning方法对马尔可夫序列重构,(et. TT)在面对高维状态动作空间,容易面对计算复杂度高的问题。本文提出TAP算法,基于Transformer的VQ-VAE,利用提取的状态动作在隐空间的低微特征进行Planning…

【LAMMPS学习】八、基础知识(2.4)恒温器

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语,以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…

【JavaWeb】Day38.MySQL概述——数据库设计-DQL(一)

数据库设计——DQL 介绍 DQL英文全称是Data Query Language(数据查询语言),用来查询数据库表中的记录。 查询关键字:SELECT 查询操作是所有SQL语句当中最为常见,也是最为重要的操作。在一个正常的业务系统中,查询操作的使用频次…

2024妈妈杯Mathorcup数学建模竞赛选题建议

关于十四届妈妈杯题目点击链接加入群聊【2024年第十四届MathorCup数学建模】:http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kNol416eFZyg4AFPHCZsYfGkLnEnZ8H36&authKeyo9lIFgRfnk2U%2FfYYg1AlFJd5I456CSA2M6nlvJX2qcUockIKuMHj%2BhKMP6RnPeo1&noverify0&a…

在Ubuntu上搭建Prometheus + Grafana监控系统

1.Prometheus 部署 从官网下载页面找到最新的二进制文件下载 cd ~ curl -LO https://github.com/prometheus/prometheus/releases/download/v2.51.1/prometheus-2.51.1.linux-amd64.tar.gz将文件解压到指定目录 tar xf prometheus-2.51.1.linux-amd64.tar.gz -C /usr/local为…

每天学点儿Python(5) -- 序列索引和切片

Python中,序列是指一块可存放多个值的连续内存空间,这些值按一定顺序排列,可通过每个值所在位置的编号(称为索引)访问它们。它类似于C/C中的数组或字符串,但又比数组或字符串强大很多 序列类型包括字符串、…

挖掘未来:私有LTE/5G网络驱动智慧矿山的自动化

私有LTE/5G网络为世界上一些最偏远的角落提供无线连接。如果没有无线通信网络,各行业就无法满足增加产量、降低运营成本和减少环境破坏的需求。 在本案例研究中,我们着眼于自动化如何改变无线网络的动态。智慧矿山要求运营商无缝集成多个系统和应用程序…

Keil #include “stm32f10x.h“报错

给我的提示 我看到懵逼了,我就一直在网上找各种方法,发现都不行,我就想没有找到,我挨个挨个去找它想要的,发现是有的 我就想这不是有吗,怎么会找不到呢 我就又想是我路径写错了?我就看了一下路…

【深度学习】Fine-Grained Face Swapping via Regional GAN Inversion高保真换脸范式

文章目录 代码介绍实践效果 帮助、问询 代码 https://github.com/e4s2022/e4s 介绍 Fine-Grained Face Swapping via Regional GAN Inversion 提出一种新的高保真换脸范式,能够保留期望的微妙几何和纹理细节。从微观面部编辑的角度重新思考换脸任务,基…

npm创建Vue3项目

npm创建Vue3项目 1 创建Vue项目说明 2 安装3 运行 1 创建Vue项目 创建最新版的Vue项目,已经不推荐使用CLI构建方式了。参考如下即可。 npm create vuelatest如果发现一直动不了,切换网络试一下,个人热点尝试一下。 按下图的选项按需引入自…

[STM32+HAL]DengFOC移植之闭环位置控制

一、源码来源 DengFOC官方文档 二、HAL库配置 1、开启硬件IIC低速模式 低速更稳定 2、PWM波开启 三、keil填写代码 1、AS5600读取编码器数值 #include "AS5600.h" #include "math.h"float angle_prev0; int full_rotations0; // full rotation trac…

OSCP靶场--Hawat

OSCP靶场–Hawat 考点(目录扫描zip文件下载java代码审计web1的sql注入写到web2的webshel) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.147 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-11 07:18 EDT …