#HarmonyOS:基础语法

基础语法

  1. 定义了声明式UI描述;

  2. 自定义组件;

  3. 动态扩展UI元素的能力;

状态管理

  1. 多维度装填管理机制;
  2. 父子组件间
  3. 爷孙组件间
  4. 全局范围内传递
  5. 跨设备传递
  6. 只读的单向传递
  7. 可变的双向传递

渲染控制

  • UI描述:以声明式的方式来描述UI的结构,例如build()方法中的代码块;
  • 自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。、
  • 系统组件:ArkUI框架中默认内置的基础和容器组件。

自定义组件

  1. 可组合

  2. 可重用

  3. 数据驱动UI更新

    自定义组件的基本结构

    @Component
    struct HelloComponent {@State message: string = 'Hello, World!';build() {// HelloComponent自定义组件组合系统组件Row和TextRow() {Text(this.message).onClick(() => {// 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}
    }
    

    struct+自定义组件名+{…}

    @Component装饰器仅能装饰struct关键字声明的数据结构。

    struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI。

    @Component
    struct MyComponent {build() {}
    }
    
成员函数/变量

成员函数具有以下约束:

  • 不支持静态函数。
  • 成员函数的访问始终是私有的。

成员变量具有以下约束:

  • 不支持静态成员变量。
  • 所有成员变量都是私有的,变量的访问规则与成员函数的访问规则相同。
  • 自定义组件的成员变量本地初始化有些是可选的,有些是必选的。具体是否需要本地初始化,是否需要从父组件通过参数传递初始化子组件的成员变量,请参考状态管理。
自定义组件的参数规定
@Component
struct MyComponent {private countDownFrom: number = 0;private color: Color = Color.Blue;build() {}
}@Entry
@Component
struct ParentComponent {private someColor: Color = Color.Pink;build() {Column() {// 创建MyComponent实例,并将创建MyComponent成员变量countDownFrom初始化为10,将成员变量color初始化为this.someColorMyComponent({ countDownFrom: 10, color: this.someColor })}}
}
build()函数

所有声明在build()函数的语言,我们统称为UI描述语言。

UI描述需要遵循以下规则:

@Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件,其中ForEach禁止作为根节点。

@Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件,其中ForEach禁止作为根节点。

@Entry
@Component
struct MyComponent {build() {// 根节点唯一且必要,必须为容器组件Row() {ChildComponent() }}
}@Component
struct ChildComponent {build() {// 根节点唯一且必要,可为非容器组件Image('test.jpg')}
}
反例
build() {// 反例:不允许声明本地变量let a: number = 1;
}
build() {// 反例:不允许声明本地变量let a: number = 1;
}

不允许创建本地的作用域,反例如下

build() {// 反例:不允许本地作用域{...}
}

不允许调用除了被@Builder装饰以外的方法,允许系统组件的参数是TS方法的返回值

@Component
struct ParentComponent {doSomeCalculations() {}calcTextValue(): string {return 'Hello World';}@Builder doSomeRender() {Text(`Hello World`)}build() {Column() {// 反例:不能调用没有用@Builder装饰的方法this.doSomeCalculations();// 正例:可以调用this.doSomeRender();// 正例:参数可以为调用TS方法的返回值Text(this.calcTextValue())}}
}

不允许switch语法,如果需要使用条件判断,请使用if。反例如下。

build() {Column() {// 反例:不允许使用switch语法switch (expression) {case 1:Text('...')break;case 2:Image('...')break;default:Text('...')break;}}
}

不允许使用表达式,反例如下。

build() {Column() {// 反例:不允许使用表达式(this.aVar > 10) ? Text('...') : Image('...')}
}
自定义组件通用样式

自定义组件通过“.”链式调用的形式设置通用样式。

@Component
struct MyComponent2 {build() {Button(`Hello World`)}
}@Entry
@Component
struct MyComponent {build() {Row() {MyComponent2().width(200).height(300).backgroundColor(Color.Red)}}
}

ArkUI给自定义组件设置样式时,相当于给MyComponent2套了一个不可见的容器组件,而这些样式是设置在容器组件上的,而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到,背景颜色红色并没有直接生效在Button上,而是生效在Button所处的开发者不可见的容器组件上。

页面和自定义组件声明周期

页面

即应用的UI页面。可以由一个或者多个自定义组件组成,

@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅有一个@Entry

只有被@Entry装饰的组件才可以调用页面的声明周期

  • onPageShow:页面每次显示时触发。

  • onPageHide:页面每次隐藏时触发一次。

  • onBackPress:当用户点击返回按钮时触发。

  • aboutToAppear:组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行。

  • aboutToDisappear:在自定义组件即将析构销毁时执行。

// Index.ets
import router from '@ohos.router';@Entry
@Component
struct MyComponent {@State showChild: boolean = true;// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageShow() {console.info('Index onPageShow');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onPageHide() {console.info('Index onPageHide');}// 只有被@Entry装饰的组件才可以调用页面的生命周期onBackPress() {console.info('Index onBackPress');}// 组件生命周期aboutToAppear() {console.info('MyComponent aboutToAppear');}// 组件生命周期aboutToDisappear() {console.info('MyComponent aboutToDisappear');}build() {Column() {// this.showChild为true,创建Child子组件,执行Child aboutToAppearif (this.showChild) {Child()}// this.showChild为false,删除Child子组件,执行Child aboutToDisappearButton('create or delete Child').onClick(() => {this.showChild = false;})// push到Page2页面,执行onPageHideButton('push to next page').onClick(() => {router.pushUrl({ url: 'pages/Page2' });})}}
}@Component
struct Child {@State title: string = 'Hello World';// 组件生命周期aboutToDisappear() {console.info('[lifeCycle] Child aboutToDisappear')}// 组件生命周期aboutToAppear() {console.info('[lifeCycle] Child aboutToAppear')}build() {Text(this.title).fontSize(50).onClick(() => {this.title = 'Hello ArkUI';})}
}

@Builder装饰器:自定义构建函数

@Builder所装饰的函数遵循build()函数语法规则,开发者额可以将重复使用的UI元素抽象成一个方法,在build方法里调用。

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

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

相关文章

鸿蒙方舟开发框架ArkUI简介

语雀知识库地址:语雀HarmonyOS知识库 飞书知识库地址:飞书HarmonyOS知识库 嗨,各位别来无恙呐,我是小白 众所周知,华为在今年推出了 HarmonyOS 4.0 版本,而在此之前的版本中,HarmonyOS 应用的 …

2024年AI视频识别技术的6大发展趋势预测

随着人工智能技术的快速发展,AI视频识别技术也将会得到进一步的发展和应用。2023年已经进入尾声,2024年即将来临,那么AI视频识别技术又将迎来怎样的发展趋势?本文将对2023年的AI视频技术做一个简单的盘点并对2024年的发展趋势进行…

Advanced Renamer

Advanced Renamer 安装链接 1.前后添加字符 2.字符转数字,编号整体加减

oracle实验2023-12-8--触发器

第十四周实验 【例】功能要求:增加一新表XS_1,表结构和表XS相同,用来存放从XS表中删除的记录。 分析: 1、创建表 xs_1 SQL> create table xs_1 as select * from xs; Table created SQL> truncate table xs_1; Table truncated题目&a…

StoneDB-8.0-V2.2.0 企业版正式发布!性能优化,稳定性提升,持续公测中!

​ 11月,StoneDB 新版本如期而至,这一个月来我们的研发同学加班加点,持续迭代:在 2.2.0 版本中,我们针对用户提出的需求和做出了重量级更新,修复了一些已知和用户反馈的 Bug,同时对部分代码进行…

PairLIE论文阅读笔记

PairLIE论文阅读笔记 论文为2023CVPR的Learning a Simple Low-light Image Enhancer from Paired Low-light Instances.论文链接如下: openaccess.thecvf.com/content/CVPR2023/papers/Fu_Learning_a_Simple_Low-Light_Image_Enhancer_From_Paired_Low-Light_Instan…

Kafka安全性探究:构建可信赖的分布式消息系统

在本文中,将研究Kafka的安全性,探讨如何确保数据在传输和存储过程中的完整性、机密性以及授权访问。通过详实的示例代码,全面讨论Kafka安全性的各个方面,从加密通信到访问控制,帮助大家构建一个可信赖的分布式消息系统…

Vue:用IDEA开发Vue,标签语法爆红问题处理

一、场景描述 我在IDEA中,学习Vue课程。 入门学习时,是在html文件中,script引入vue.js文件方式。 此时,在html文件中用v-标签,爆红。 二、解决办法 打开 菜单栏 File - Settings 选择 Editor - Files Type&#xf…

《每天一个Linux命令》 -- (5)通过sshkey密钥登录服务器

欢迎阅读《每天一个Linux命令》系列!在本篇文章中,将介绍通过密钥生成,使用公钥连接管理服务器。 概念 SSH 密钥是用于安全地访问远程服务器的一种方法。SSH 密钥由一对密钥组成:公钥和私钥。公钥存储在远程服务器上,…

软件工程复习

一、题型 单项选择题 20分 填空题 10分 判断题 10分 简答题 18分 应用题 12分 综合题 30分 软件程序数据文档 软件是无形的、不可见的逻辑实体 20世纪60年代末爆发软件危机 软件危机是指软件在开发与维护过程中遇到的一系列严重的问题 …

理解 GET、POST、PATCH 和 DELETE 请求的参数传递方式

理解 GET、POST、PATCH 和 DELETE 请求的参数传递方式 本文将向您介绍在使用 GET、POST、PATCH 和 DELETE 请求时如何传递参数。通过详细解释每种请求的参数传递方式和示例代码,您将了解如何正确地将数据发送到服务器并与之交互。 GET 请求的参数传递方式 在 GET…

CentOS 7.9安装宝塔面板,安装gitlab服务器

docker安装方式比较慢,安装包1.3GB 安装后启动很慢 docker logs q18qgztxdvozdv_gitlab-ce-gitlab-1 docker ps docker exec -it q18qgztxdvozdv_gitlab-ce-gitlab-1 sh cd /etc/gitlab cat initial_root_password 软件商店安装方式,失败了2023.12…

hook其他调试技巧

输出堆栈信息 通过 android.util.Log 输出当前线程的堆栈跟踪信息。 function showStacks() {Java.perform(function () {console.log(Java.use("android.util.Log").getStackTraceString(Java.use("java.lang.Throwable").$new() )); }) } 可以在需要的…

机器学习--稀疏学习

前置知识: 通常学习一次模型的过程如下:我们普遍为了获取更好的模型效果,直接对原始数据学习,会造成过拟合、需要特征提取; 而若特征提取完后依旧有很多特征,还是会容易过拟合。这时候就需要特征降维和特…

C/C++端口复用SO_REUSEADDR(setsockopt参数),test ok

端口复用最常用的用途应该是防止服务器重启时之前绑定的端口还未释放或者程序突然退出而系统没有释放端口。这种情况下如果设定了端口复用,则新启动的服务器进程可以直接绑定端口。如果没有设定端口复用,绑定会失败,提示ADDR已经在使用中——…

STM32 寄存器配置笔记——USART DMA发送

一、DMA介绍 直接存储器存取(DMA)用来提供在外设和存储器之间或者存储器和存储器之间的高速数据传 输。无须 CPU 干预,数据可以通过 DMA 快速地移动,这就节省了 CPU 的资源来做其他操作。当产品对于时序要求较严格时,外设使用DMA的方式能够减…

深入了解Java 8日期时间新玩法:DateTimeFormatter与ZoneOffset的使用

推荐语 在这篇文章中,我们将深入探讨Java中的DateTimeFormatter和ZoneOffset类的功能和使用方法。这些类是在Java 8中引入的新的日期时间API的一部分,它们为我们提供了更灵活、更易用的日期和时间处理能力。尽管这些类在Java 8中已经出现,但…

ELK(六)—Filebeat安装部署

目录 一、介绍1.1特点1.2使用原因1.3结构图1.4工作流程 二、安装部署2.1下载2.2启动2.3监控日志文件2.4自定义字段 三、连接Elasticsearch四、工作原理 一、介绍 Filebeat是一个轻量级的日志和文件数据收集器,属于Elastic Stack(ELK Stack)中…

近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应

关于Chrome更新http强制跳转到https解决方法 近期Chrome浏览器 不知哪个版本升级后原先http强制跳转到https,导致服务端302强制跳转到http也没反应一、F12检查加载的Response Headers中有没有Non-Authoritative-Reason二、找了资料后得到解决方案:三、找…

插入排序——直接插入排序和希尔排序(C语言实现)

文章目录 前言直接插入排序基本思想特性总结代码实现 希尔排序算法思想特性总结代码实现 前言 本博客插入排序动图和希尔排序视频参考大佬java技术爱好者,如有侵权,请联系删除。 直接插入排序 基本思想 直接插入排序是一种简单的插入排序法&#xff…