鸿蒙开发HarmonyOS NEXT (三) 熟悉ArkTs

一、自定义组件

1、自定义组件

自定义组件,最基础的结构如下:

@Component
struct Header {build() {}
}

提取头部标题部分的代码,写成自定义组件。

1、新建ArkTs文件,把Header内容写好。

2、在需要用到的地方,导入引用即可

@Component
export struct Header {private title: ResourceStr = ''build() {Row() {Text(this.title).fontWeight(FontWeight.Bold).fontSize(24)}.width('100%').margin({ bottom: 10 })}
}
import { Header } from "../conponents/CommonHeader"@Entry
@Component
struct Index {@Statebuild() { // UI描述,内部声明式UI结构Column({ space: 10 }) {Header({ title: "商品列表" })}.width('100%')}.backgroundColor('#f0f8ff').padding(20).width('100%').height('100%')}
}

2、构建函数 

如果是仅在该页面内部运用的组件,就可以用构建函数的方式来定义组件

分两类:全局和局部,区别就是写在struct函数外还是内,若是放在struct之内,就不需要些‘function’字段了

这样封装,就保证了代码易读易维护

3、公共样式

类似的,样式也可以这样封装

但是Styles只能封装所有组件都有的公共属性,那对于个别的如何处理呢

就需要用到Extend(注意:只能定义成全局的,不能写在struct函数内部)

二、状态管理-装饰器

1、@State

@State装饰器官网文档

@State类似于react中的UseState,只在组件内部使用

@Entry
@Component
struct StatePage {@State message: string = "hello"build() {Column() {Text(this.message).fontSize(20).onClick(()=>{this.message = '测试'})}.width('100%')}
}

2、@Props

@Prop装饰器官网文档

父组件单向传值给子组件,类似于react里的props参数,可以理解为父组件参数拷贝一份给子组件

子组件数值的变化不会同步到父组件

//子组件
@Component
struct CountDownComponent {@Prop count: number = 0;costOfOneAttempt: number = 1;build() {Column() {if (this.count > 0) {Text(`You have ${this.count} Nuggets left`)} else {Text('Game over!')}// @Prop装饰的变量不会同步给父组件Button(`Try again`).onClick(() => {this.count -= this.costOfOneAttempt;})}}
}//父组件
@Entry
@Component
struct ParentComponent {@State countDownStartValue: number = 10;build() {Column() {Text(`Grant ${this.countDownStartValue} nuggets to play.`)// 父组件的数据源的修改会同步给子组件Button(`+1 - Nuggets in New Game`).onClick(() => {this.countDownStartValue += 1;})// 父组件的修改会同步给子组件Button(`-1  - Nuggets in New Game`).onClick(() => {this.countDownStartValue -= 1;})CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })}}
}

3、@Link

变量与其父组件中对应的数据源建立双向数据绑定

可以理解为父组件把地址给子组件,所以改变能够同步

@Link装饰器官网文档


//子组件接收变量@Link count: number@Link costOfOneAttempt: number//调用子组件,因为是引用的方式,所以要加上$CountDownComponent({ count: $countDownStartValue})

4、@Provide 和 @Consume

应用于与后代组件的双向数据同步,应用于状态数据在多个层级之间传递的场景,实现跨层级传递

就是爷爷和孙子之间直接沟通

不需要一级一级的显示传参

@Provide装饰的变量是在祖先组件中,@Consume装饰的变量是在后代组件中

感觉很方便,但一般咱不用,因为比较消耗性能

@Entry
@ComponentV2
struct Parent {@Provider() str: string = 'hello';build() {Column() {Button(this.str).onClick(() => {this.str += '0';})Child()}}
}@ComponentV2
struct Child {@Consumer() str: string = 'world';build() {Column() {Button(this.str).onClick(() => {this.str += '0';})}}
}

5、@Observed 和 @ObjectLink

用于在涉及嵌套对象或数组的场景中进行双向数据同步

因为对于非简单类型,比如class、Object或者数组,是需要被@Observed装饰的,否则将观察不到其属性的变化

/**子组件定义包包的类型*/
@Observed
class Bag {public id: number;public size: number;constructor(size: number) {this.id = NextID++;this.size = size;}
}
@Observed
class User {public bag: Bag;constructor(bag: Bag) {this.bag = bag;}
}/**子组件*/
@Component
struct ViewA {label: string = 'ViewA';//被引用的类需要用ObjectLink装饰@ObjectLink bag: Bag;build() {Column() {Text(`ViewA [${this.label}] this.bag.size = ${this.bag.size}`).fontColor('#ffffffff').backgroundColor('#ff3d9dba').width(320).height(50).borderRadius(25).margin(10).textAlign(TextAlign.Center)}Button(`ViewA: this.bag.size add 1`).width(320).backgroundColor('#ff17a98d').margin(10).onClick(() => {this.bag.size += 1;})}
}
}/**父组件*/
@Entry
@Component
struct ViewB {@State user: User = new User(new Bag(0));build() {Column() {ViewA({ label: 'ViewA #1', bag: this.user.bag }).width(320)}}
}

三、页面路由

把所有访问记录存在栈里,类似于出栈入栈,跳转就添加一条记录,回到上一页就是把当前记录弹出栈,就回到了上一页(ps:页面栈的最大容量是32)

如果新访问的页面是栈里存在的,把它挪到栈顶即可,这样节省空间性能

1、跳转

有两种方式:保留访问记录就用pushUrl,如果要销毁记录,就用replaceUrl

import router from '@ohos.router';
class DataModelInfo {age: number = 0;
}class DataModel {id: number = 0;info: DataModelInfo|null = null;
}function onJumpClick(): void {// 在Home页面中let paramsInfo: DataModel = {id: 123,info: {age: 20}};router.pushUrl({url: 'pages/Detail', // 目标urlparams: paramsInfo // 添加params属性,传递自定义参数}, (err) => {if (err) {console.error(`跳转失败, ${err.code}, ${err.message}`);return;}console.info('跳转成功!');})
}

2、回到上一页

返回用即可

import router from '@ohos.router';
//回退到指定的home页
router.back({url: 'pages/Home'
});
//不传参,即是回退到上一页
//router.back();

3、综合小案例

跳转到对应页面

如果新建页面时,选择的是新建page,则自动配置路径,若是选择ArkTs,则是没有的

import router from '@ohos.router';class RouterInfo {url: stringtitle: stringconstructor(url: string, title: string) {this.url = url;this.title = title}
}@Entry
@Component
struct Index {@State message: string = '页面列表'private routers: RouterInfo[] = [new RouterInfo("pages/Shopping", "商品"),new RouterInfo("pages/Mine", "我的"),]build() {Column() {Text(this.message).fontSize(30)List({ space: 15 }) {ForEach(this.routers,(router: RouterInfo, index) => {ListItem() {this.RouterItem(router, index + 1)}})}}.width('100%')}@BuilderRouterItem(r: RouterInfo, i: number) {Row() {Text(i + '.').fontSize(20).fontColor(Color.White)Blank()Text(r.title).fontSize(20).fontColor(Color.White)}.width(120).padding(12).backgroundColor('#38f').borderRadius(20).onClick(() => {router.pushUrl({url: r.url,params: i},router.RouterMode.Single,err => {if (err) {console.log(`跳转失败${err.message}${err.code}`)}})})}
}

写在最后,可结合Harmony_鸿蒙专栏阅读

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

centos7 安装mysql8.0.34

在 CentOS 7 上安装 MySQL 8.0.34 的步骤如下: 1. 卸载 MariaDB(如果已安装) CentOS 7 默认使用 MariaDB 作为数据库管理系统,因此在安装 MySQL 之前需要卸载 MariaDB。 rpm -qa | grep mariadb rpm -e --nodeps mariadb-libs-5…

Linux 摄像头编号固化

一、前言 在工业领域,一台设备会有很多个摄像头,可以使用命令:ll /dev/video* 进行查看; 在代码中,如果需要使用摄像头,那么都是需要具体到哪个摄像头编号的,例如 open("/dev/video4"…

[Day 24] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

AI在自動駕駛中的應用 1. 簡介 自動駕駛技術是現代交通領域的一個革命性進展。通過結合人工智能(AI)、機器學習(ML)、深度學習(DL)和傳感器技術,自動駕駛汽車可以在無人干預的情況下安全駕駛。…

线段树求区间最值问题

引言 今天主要还是练了两道题,是有关线段树如何去求一个区间内的最值问题的,我们可以用线段树来解决。 对应一个无法改变顺序的数组,我们想要去求一个区间内的最值,假设有n个结点,m次询问,暴力的解决办法…

51、基于主成分分析和聚类分析的基因表达分析(matlab)

1、主成分分析和聚类分析简介 主成分分析(Principal Component Analysis, PCA)和聚类分析(Cluster Analysis)是两种常用的数据分析方法,用于降维和数据分类。 1)主成分分析(PCA) 主成分分析是一种常用的多元统计数据分析方法,旨在通过找到数据中最重要的变量(主成…

股票分析-20240628

今日关注: 20240626 六日涨幅最大: ------1--------300386--------- 飞天诚信 五日涨幅最大: ------1--------300386--------- 飞天诚信 四日涨幅最大: ------1--------300386--------- 飞天诚信 三日涨幅最大: ------1--------300386--------- 飞天诚信 二日涨幅最…

基于go-gmsm静态库编写的SM2椭圆曲线公钥密码算法PHP扩展 相较于openssl-ext-sm2编译更方便 增加了密文指定排序、识别ans1编码等功能

go-ext-sm2 介绍 基于go-gmsm静态库编写的SM2椭圆曲线公钥密码算法PHP扩展 相较于openssl-ext-sm2编译更方便 增加了密文指定排序、识别ans1编码等功能 特性:非对称加密 git地址:https://gitee.com/state-secret-series/go-ext-sm2.git 软件架构 zend 常规PHP扩展结构 …

vue-org-tree搜索到对应项高亮展开

效果图&#xff1a; 代码&#xff1a; <template><div class"AllTree"><el-form :inline"true" :model"formInline" class"demo-form-inline"><el-form-item><el-input v-model"formInline.user&quo…

c++ using namespace std的作用及注意事项

在C中&#xff0c;using namespace std; 是一个常见的指令&#xff0c;它用于简化标准库&#xff08;Standard Library&#xff09;中类和函数的引用。下面我将详细解释这个指令的作用和使用时的注意事项。 作用 在c/c标准库中&#xff0c;许多类和函数的定义都在std(standar…

【Git】远程仓库操作

创建远程仓库 在官网进行注册登录&#xff1a;Gitee或Github 进入后点击新建仓库&#xff0c;默认选项创建即可 **仓库创建完成后可以看到SSH的仓库地址&#xff1a;gitgitee.com:username/test.git**或gitgithub.com:Toukensan/test.git 配置SSH公钥 在本地通过命令行创建…

js学习--制作猜数字

猜数字制作 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><script>function fun() {alert("1-100猜数字");let num Math.floor(Math.random() * 100) 1;for …

MDB-RS232 控制自动售货机MDB年龄验证设备

(以下是与台湾ICT的DCM5年龄验证设备测试数据) &#xff08;如果需要使用年龄验证设备&#xff0c;一定要记得购买MDB-RS232的PRO版本&#xff0c;也就是专业版&#xff09; 指令 HEX 代码 描述 RESET(复位) 68H 复位设备 SETUP(配置) 69H 读取年龄验证设备配置 Expa…

12个视觉艺术分类

视觉设计可以按照多种方式进行分类&#xff0c;这些分类通常基于设计的目的、风格或应用场景。本文为大家介绍12种视觉设计&#xff0c;分别是平面设计、标志设计、包装设计、用户界面设计 (UI Design)、用户体验设计 (UX Design)、插图设计、网页设计、动画设计、展览设计、环…

Python小练习05

一 绘制如下图形。 #Q1 import turtle as t def draw(n):for i in range(n):t.left(30)t.fd(100)t.left(120)t.fd(100)t.left(120)t.fd(100)t.left(120)t.fd(100)t.right(90) t.penup() t.goto(-150,20) t.speed(0) t.pendown() t.pencolor("red") t.pensize(5) draw…

CentOS搭建KMS服务器

CentOS搭建KMS服务器 一、使用git拉取vlmcsd项目并在本地编译 若还未安装git&#xff0c;使用命令yum install git -y进行安装。使用git gitgithub.com:Wind4/vlmcsd.git拉取项目。 cd vlmcsd #进入项目目录 make #进行编译二、开放防火墙端口&#xff0c;创建开机自启…

flask项目部署总结

这个部署的时候要用虚拟环境&#xff0c;cd进项目文件夹 python3 -m venv myenv source myenv/bin/activate激活 之后就安装一些库包之类的&#xff0c;&#xff08;flask&#xff0c;requests,bs4,等等&#xff09; 最重要的是要写.flaskenv文件并且pip install 一个能运行…

tls各个版本的安全性介绍

TLS&#xff08;Transport Layer Security&#xff09;协议的各个版本在安全性方面经历了逐步的演进和改进&#xff0c;以应对不断变化的网络安全威胁。以下是各主要版本的安全性概览&#xff1a; TLS 1.0&#xff1a; 发布于1999年&#xff0c;是SSL 3.0的后续版本。在其发布时…

单调栈(左小大,右小大)

①寻找每个数左边第一个比它小的数 给定一个长度为 N 的整数数列&#xff0c;输出每个数左边第一个比它小的数&#xff0c;如果不存在则输出 −1。 输入样例&#xff1a; 3 4 2 7 5 输出样例&#xff1a; -1 3 -1 2 2 从左到右遍历&#xff0c;用单调递增&#xff08;栈底到栈顶…

数据看板/可视化大屏的实际价值到底是什么?详解数据可视化的实用之处

数据驾驶舱/数据看板/可视化大屏的实际价值&#xff0c;取决于使用者的实际需求。 华而不实&#xff1f;华就是实&#xff01; 关于可视化大屏最广泛的争议&#xff0c;便是对其“华而不实”的批评&#xff0c;认为可视化大屏缺乏技术含量&#xff0c;只是一钟比较高级的“装饰…

推荐 2个功能强大的黑科技工具,真的会让你直呼卧槽

Waifu2X Waifu2x 是一个基于深度学习的开源项目&#xff0c;主要用于处理二次元动漫风格的图像。它使用卷积神经网络&#xff08;CNN&#xff09;进行超分辨率处理和降噪&#xff0c;能够将图像放大2倍或更多&#xff0c;同时显著提高清晰度和减少噪声。Waifu2x 特别针对日系漫…