#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和Text
    Row() {
      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.someColor
      MyComponent({ 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 aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
      Button('create or delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2页面，执行onPageHide
      Button('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方法里调用。

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

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

相关文章

Numpy自定义功能函数 np.apply_along_axis()（第14讲）

Numpy自定义功能函数 np.apply_along_axis()（第14讲）

Numpy自定义功能函数 np.apply_along_axis()（第14讲）         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…
阅读更多...
生日备忘录（自定义排序）

生日备忘录（自定义排序）

题目： 实现简易的生日备忘录。温暖的亲情是前进的动力，别忘记在家人生日时送 去祝福。定义类 Member 描述家庭成员，每位家人有自己的姓名 name 和出生日期 birthday，出生日期应描 述为由 year、month、day 组成的 Date 类。在 ma…
阅读更多...
应用商店ASO优化提升APP排名的6大策略

应用商店ASO优化提升APP排名的6大策略

ASO优化基操你了解多少？ ASO优化对于APP推广运营来说是必不可少的一个方法。在当今竞争激烈的应用程序市场中，ASO（App Store Optimization）优化已成为提升APP排名和曝光度的关键因素。 一、ASO优化的重要性 ASO优化有助于提高AP…
阅读更多...
【每周一测】Java阶段四第三周学习

【每周一测】Java阶段四第三周学习

目录 1、关于分布式锁的说法，错误的是（ ） 2、JDK动态代理产生的代理类和委托类的关系是 3、下列关于ElasticSearch中基本概念描述错误的是 4、Spring Cloud 中，Feign 是什么？ 5、在JavaScript中，可以使…
阅读更多...
Esxi7Esxi8设置VMFSL虚拟闪存的大小

Esxi7Esxi8设置VMFSL虚拟闪存的大小

Esxi7Esxi8设置VMFSL虚拟闪存的大小 ESXi7,8 默认安装会分配一个 VMFSL(VMFS-L)(Local VMFS)很大空间(120G), 感觉很浪费, 实际给 8G 就可以了, 最少 6G , 经实验,给2G没法安装 . Esxi7是虚拟闪存的 修改的方法是: 在安装时修改 设置 autoPartitionOSDataSize8192 在cdromBoo…
阅读更多...
UI自动化测试框架：PO 模式+数据驱动

UI自动化测试框架：PO 模式+数据驱动

1、PO 设计模式简介 什么是 PO 模式？ PO（PageObject）设计模式将某个页面的所有元素对象定位和对元素对象的操作封装成一个 Page 类，并以页面为单位来写测试用例，实现页面对象和测试用例的分离。 PO 模式的设计思想与…
阅读更多...
leetcode 1466

leetcode 1466

leetcode 1466 使用dfs 遍历图结构 如图 node 4 -> node 0 -> node 1 因为节点数是n, 边长数量是n-1。所以如果是从0出发的路线，都需要修改，反之，如果是通向0的节点，例如节点4，则把节点4当作父节点的节点&…
阅读更多...
【优选算法系列】【专题二滑动窗口】第四节.30. 串联所有单词的子串和76. 最小覆盖子串

【优选算法系列】【专题二滑动窗口】第四节.30. 串联所有单词的子串和76. 最小覆盖子串

文章目录 前言一、串联所有单词的子串 1.1 题目描述 1.2 题目解析 1.2.1 算法原理 1.2.2 代码编写 1.2.3 题目总结二、最小覆盖子串 2.1 题目描述 2.2 题目解析 2.2.1 算法原理 2.2.2 代码编写 …
阅读更多...
【外观模式】SpringBoot集成mail发送邮件

【外观模式】SpringBoot集成mail发送邮件

前言 发送邮件功能，借鉴 刚果商城，根据文档及项目代码实现。整理总结便有了此文，文章有不对的点，请联系博主指出，请多多点赞收藏，您的支持是我最大的动力~ 发送邮件功能主要借助 mail、freemarker以及rocke…
阅读更多...
UML案例分析

UML案例分析

首先需要花大约20分钟来思考解决这个问题，如果对问题不是很熟悉，也可以在完成题目之后，找相关的资料翻阅（例如看UML类图的基本情况，UML状态图的基本情况，然后结合这些信息 做一个自我评价，看这个…
阅读更多...
NGINX高性能服务器与关键概念解析

NGINX高性能服务器与关键概念解析

目录 1 NGINX简介2 NGINX的特性3 正向代理4 反向代理5 负载均衡6 动静分离7 高可用8 结语 1 NGINX简介 NGINX（“engine x”）在网络服务器和代理服务器领域备受推崇。作为一款高性能的 HTTP 和反向代理服务器，它以轻量级、高并发处理能力以及…
阅读更多...
51单片机的时钟电路与时序以及 复位电路和电源模式

51单片机的时钟电路与时序以及 复位电路和电源模式

51单片机的时钟电路与时序以及 复位电路和电源模式 本文主要涉及51单片机的时钟电路以及相关时序的知识，也讲解了了51单片机的复位电路以及电源模式。 文章目录 51单片机的时钟电路与时序以及 复位电路和电源模式一、时钟电路与时序1、 时钟电路设计1.1 内部时钟方式…
阅读更多...
文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑垃圾处理与调峰需求的可持续化城市多能源系统规划》

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑垃圾处理与调峰需求的可持续化城市多能源系统规划》

这个标题涵盖了城市多能源系统规划中的两个重要方面：垃圾处理和调峰需求，并强调了规划的可持续性。 考虑垃圾处理： 含义： 垃圾处理指的是城市废弃物的管理和处置。这可能涉及到废物分类、回收利用、焚烧或填埋等方法。重要性&…
阅读更多...
IOday7作业

IOday7作业

1> 使用无名管道完成父子进程间的通信 #include<myhead.h>int main(int argc, const char *argv[]) {//创建存放两个文件描述符的数组int fd[2];int pid -1;//打开无名管道if(pipe(fd) -1){perror("pipe");return -1;}//创建子进程pid fork();if(pid &g…
阅读更多...
Linux信息收集

Linux信息收集

Linux信息收集 本机基本信息 #管理员 $普通用户 之前表示登录的用户名称&#xff0c;之后表示主机名&#xff0c;再之后表示当前所在目录 / 表示根目录 ~表示当前用户家目录1、内核&#xff0c;操作系统和设备信息 uname -a 打印所有可用的系统信息 uname -r 内核版本 u…
阅读更多...
scala安装使用教程_一篇搞定！

scala安装使用教程_一篇搞定！

1、Scala高级语言 1.1 Scala简介 Scala是一门多范式&#xff08;multi-paradigm&#xff09;的编程语言&#xff0c;设计初衷是要集成面向对象编程和函数式编程的各种特性。 Scala运行在Java虚拟机上&#xff0c;并兼容现有的Java程序。 Scala源代码被编译成Java字节码&#…
阅读更多...
解读Stable Video Diffusion：详细解读视频生成任务中的数据清理技术

解读Stable Video Diffusion：详细解读视频生成任务中的数据清理技术

Diffusion Models视频生成-博客汇总 前言：Stable Video Diffusion已经开源一周多了，技术报告《Stable Video Diffusion: Scaling Latent Video Diffusion Models to Large Datasets》对数据清洗的部分描述非常详细，虽然没有开源源代码，但是博主正在尝试复现其中的操作。这篇…
阅读更多...
DSP处理器及其体系结构特点（您都用过哪些DSP？）

DSP处理器及其体系结构特点（您都用过哪些DSP？）

DSP处理器概述 数字信号处理器&#xff08;Digital Signal Processor&#xff0c;DSP&#xff09;是一种专门设计用于执行数字信号处理任务的微处理器类型。与通用微处理器&#xff08;如CPU&#xff09;相比&#xff0c;DSP处理器在处理数字信号时具有更高的性能和效率。 用途…
阅读更多...
做抖店代发，新手如何定类目？五大类目优缺点分析！

做抖店代发，新手如何定类目？五大类目优缺点分析！

我是电商珠珠 类目是店铺的方向&#xff0c;只有将店铺的定位确定好&#xff0c;才能超越大部分的同行。 我经常跟我的学生讲&#xff0c;选择类目的时候不能瞎选&#xff0c;要学会去分析市场&#xff0c;由于大部分的学员前期都是新手小白&#xff0c;所以我们这边会负责给…
阅读更多...
二维数组附近遍历所有值

二维数组附近遍历所有值

二维数组附近遍历所有值 假如以56点为中心&#xff0c;上下左右近距离遍历附近值&#xff0c;看代码&#xff0c;代码把思路写出来了&#xff0c;边界问题暂不处理。 #include<iostream> using namespace std;void FindNearPos(int (*int_arr)[10] , int p_row , int …
阅读更多...
最新文章

Copyright @ 2022~2023