#HarmonyOS:基础语法

news/2024/2/27 20:35:27

基础语法

  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.ppmy.cn/news/1263545.html

相关文章

Java基础-java.util.Random生成指定区间的随机数

目录 1. 公式2. 导包3. 编写代码4. 输出运行结果 1. 公式 生成[a, b]区间的随机数: random.nextInt((b - a) 1) a 2. 导包 import java.util.Random;3. 编写代码 public class random_demo {public static void main(String[] args) {/** 随机数Random* 需求&am…

Mysql研学-认识与安装

一 数据库 1 Java的数据存储技术 ① 变量:一个数据存储空间的表示 ② 数组:存储一组相同数据类型的"容器" ③ 集合:存储一组任意引用数据类型的"容器" ④ 配置文件: .properties:基于Properties集合存储(Map集合的具体实例) .xml文件:基于标签存储数据…

【出现模块node_modules里面包找不到】

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 一、出现的问题二、解决办法三、其它可供参考 一、出现的问题 在本地运行 npm run docs:dev之后,出现 Error [ERR_MODULE_NOT_FOUND]: Cannot find package Z:\Blog\docs\node_modules\htmlparser2\ imported from Z:\Blo…

交叉编译工具链makefile

linux系统默认搜索头文件地址:/usr/include/文件夹; Windows系统默认搜索头文件地址:不同软件好像可以设置不同的地址;例如visual studio好像可以设置附加包含目录,包含目录等 Linux系统库文件路径:/lib文…

每天一点python——day90

#每天一点Python——90 #类的创建 创建类的语法: class 类名:pass【缩进之后写类里面的内容】 [类里面写什么没有想好之前,可以用pass进行占位.可以不报错]#演示: class Lei:pass #以上就上一个类被创建的样例注意事项&#xff1a…

【CentOS8】使用 Tomcat 部署 Java Web 项目(使用 sdkman)

文章目录 配置 Tomcat将 Tomcat 启动命令设置为 Linux 自定义服务给 Tomcat 设置管理员账号密码IDEA 打包 Java web 项目 我是使用 sdkman 下载的 jdk 和 tomcat,所以接下来的部署配置都是在 sdkman 构建的环境的。想要知道如何下载 sdkman 可以看看这篇文章 —…

在idea中使用maven创建dynamic web project

1、先创建一个empty project 2、添加一个module , 核心是选择maven archetype webapp, 这个是maven提供的创建web工程的模版。 3、添加完等自动安装好即可 4、目录可能不完整 右键src---->点击New---->点击Directory (注意:这是笔者所缺失的结…

让内存无处可逃:智能指针[C++11]

智能指针 文章目录 智能指针前言RAII什么是智能指针智能指针的应用示例 C98的auto_ptr共享型智能指针:shared_ptrshared_ptr的使用初始化获取原生指针指定删除器默认删除器default_delete指定删除器指定删除器管理动态数组 shared_ptr的伪实现shared_ptr的注意事项避…

【银行测试】第三方支付功能测试点+贷款常问面试题(详细)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、第三方支付功能…

笔迹鉴定系统

用于笔迹鉴定书的生成。对于检材进行的特征采集,将采集到的特征自动排版,生成比对表,然后在比对表上进行标注。主要标注有:写法、笔顺、箭头、实线、虚线、左括号、右括号、上括号、下括号、运笔、注释、来源、折线、测量、矩形、…

数据结构与程序的关系

在计算机科学中,数据结构和算法是两个核心的概念。数据结构是程序的基础,它组织和存储数据的方式直接影响程序的设计、效率、可读性以及程序的错误检测和调试。本文将详细讨论数据结构如何影响程序,以及数据结构与算法的组合如何使程序更高效、可靠。 一、数据结构的选择影…

C++ 访问限定符

目录 访问修饰符概述 protected在类的内部和派生类中访问调用 private在类的内部访问和调用 访问修饰符概述 在C中,有三个主要的访问修饰符:public、private和protected。这些修饰符用于控制类的成员(变量和函数)的访问权限。…

Java数据结构06——树

1.why: 数组&链表&树 2. 大纲 2.1前中后序 public class HeroNode {private int no;private String name;private HeroNode left;//默认为nullprivate HeroNode right;//默认为nullpublic HeroNode(int no, String name) {this.no no;this.name name;}public int …

利用法线贴图渲染逼真的3D老虎模型

在线工具推荐: 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 当谈到游戏角色的3D模型风格时,有几种不同的风格&#xf…

对String类的操作 (超细节+演示)

[本节目标] 1.认识String类 2.了解String类的基本用法 3.熟练掌握String类的常见操作 4.认识字符串常量池 5.认识StringBuffer和StringBuilder 1.String类的重要性 在C语言中已经涉及到字符串了,但是在C语言中要表示字符串只能使用字符数组或者字符指针&…

内存学习——堆(heap)

目录 一、概念二、自定义malloc函数三、Debug运行四、heap_4简单分析4.1 heap管理链表结构体4.2 堆初始化4.3 malloc使用4.4 free使用 一、概念 内存分为堆和栈两部分: 栈(Stack)是一种后进先出(LIFO)的数据结构&…

go学习笔记(17)Blob and ArrayBuffer

最近在学习go websocket的时候,在学习实验过程遇到一个比较奇怪问题。为什么我的数据返回是blob,而不是arrayBuffer?百思不得其解。 直到同事打包的时候微信小游戏遇到了一个报错。FileReader不支持。 经过在社区查询,官方答复是…

【嵌入式开发 Linux 常用命令系列 4.1 -- git push 远程分支与本地分支查看】

文章目录 概述git push 语法步骤1:git 远程主机名查看步骤2:git 远程分支名查看步骤3:git 本地分支名查看示例演示 概述 在日常工作中,将代码 git clone 本地之后,或者使用repo init && repo sync 之后不知道…

C++初阶 | [七] (上) string类

摘要:标准库中的string类的常用函数 C语言中,字符串是以\0结尾的一些字符的集合,为了操作方便,C标准库中提供了一些str系列的库函数, 但是这些库函数与字符串是分离开的,不太符合OOP(面向对象)的思想&#…

电商控制台系统商品模块的开发

ISBN编号:字符串 商品模块中:增删改查是最基本的操作。 查询:复杂查询(与多表有关系) 订单,订单详情两个表 订单(增删改查), 订单详情(增删改查&#xff…
最新文章