#HarmonyOS：基础语法

news2024/12/28 2:50:18

基础语法

  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方法里调用。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【ArcGIS Pro微课1000例】0052：基于SQL Server创建企业级地理数据库案例

【ArcGIS Pro微课1000例】0052：基于SQL Server创建企业级地理数据库案例

文章目录 环境搭建创建企业级数据库连接企业级数据库环境搭建 ArcGIS：ArcGIS Pro 3.0.1Server.ecp：版本为10.7SQL Server：版本为SQL Server Developer 2019创建企业级数据库 企业级地理数据库的创建需要通过工具箱来实现。工具位于：数据管理工具→地理数据库管理→创建企业…
阅读更多...
20 套监控平台统一成 1 套 Flashcat，国泰君安监控选型提效之路

20 套监控平台统一成 1 套 Flashcat，国泰君安监控选型提效之路

author:宋庆羽-国泰君安期货 运维工作最重要的就是维护系统的稳定性，其中监控是保证系统稳定性很重要的一环。通过监控可以了解系统的运行状态，及时发现问题和系统隐患，有助于一线人员快速解决问题，提高业务系统的可用时长。 作为…
阅读更多...
C#网络编程（System.Net命名空间）

C#网络编程（System.Net命名空间）

目录 一、System.Net命名空间 1.Dns类 （1）示例源码 （2）生成效果 2.IPAddress类 （1）示例源码 （2）生成效果 3.IPEndPoint类 （1） 示例源码 &#xff0…
阅读更多...
中东电商指南分享！盘点中东四大跨境电商平台

中东电商指南分享！盘点中东四大跨境电商平台

提到跨境电商新蓝海，就不得不想起土豪聚集地 ——中东，中东地区拥有庞大的人口、高人均GDP、强大的消费能力以及广泛普及的互联网，但外出购物却相对不便，正是这一特点为中东跨境电商市场创造了巨大的优势。随着中东地区电商的崛起…
阅读更多...
excel做预测的方法集合

excel做预测的方法集合

一. LINEST函数 首先，一元线性回归的方程： y a bx 相应的，多元线性回归方程式： y a b1x1 b2x2 … bnxn 这里： y - 因变量即预测值x - 自变量a - 截距b - 斜率 LINEST的可以返回回归方程的 截距(a) 和 斜…
阅读更多...
macOS Big Sur/Mac电脑安装vscode显示您没有权限来打开应用程序‘Visual Studio Code‘ 请联系您的电脑或网络管理员问题修复

macOS Big Sur/Mac电脑安装vscode显示您没有权限来打开应用程序‘Visual Studio Code‘ 请联系您的电脑或网络管理员问题修复

错误方法 首先我以为我的权限不足。，需要去用户群组里设置。结果根本不是这个的问题。 1.在系统偏好设置->用户与群组检查了一下我的用户是不是管理员 结果发现是管理员 2.根据苹果提示，右键我的文件夹->显示简介->最下面的共享与权限 解锁&…
阅读更多...
【K8s】Kubernetes CRD 介绍(控制器)

【K8s】Kubernetes CRD 介绍(控制器)

文章目录 CRD 概述1. 操作CRD1.1 创建 CRD1.2 操作 CRD 2. 其他笔记2.1 Kubectl 发现机制2.2 校验 CR2.3 简称和属性 3. 架构设计3.1 控制器概览 参考 CRD 概述 CR（Custom Resource）其实就是在 Kubernetes 中定义一个自己的资源类型，是一个具…
阅读更多...
python的extend函数详解

python的extend函数详解

文章目录 语法功能示例例1：添加列表例2：添加元组例3：添加集合例4：添加字典（只添加键）例5：添加字符串例6：混合类型扩展例7：扩展空列表或不可迭代对象 注意事项&#xff1a…
阅读更多...
❀dialog命令运用于linux❀

❀dialog命令运用于linux❀

目录 ❀dialog命令运用于linux❀ msgbox部件（消息框） yesno部件（yesno框） inputbox部件（输入文本框） textbox部件（文本框） menu部件（菜单框） fselect部…
阅读更多...
GeoPandas初体验:它是什么，我用它展示一下shp矢量数据

GeoPandas初体验:它是什么，我用它展示一下shp矢量数据

GeoPandas 是一个开源的 Python 库，用于处理地理空间数据。它扩展了 Pandas 这个流行的 Python 数据操作库，增加了对地理数据类型和操作的支持。GeoPandas 结合了 Pandas、Matplotlib 和 Shapely 的功能，提供了一个易于使用且高效的工具&…
阅读更多...
【SpringCache】快速入门 通俗易懂

【SpringCache】快速入门 通俗易懂

1. 介绍 Spring Cache 是一个框架，实现了基于注解的缓存功能，只需要简单地加一个注解，就能实现缓存功能。 Spring Cache 提供了一层抽象，底层可以切换不同的缓存实现，例如： EHCache Caffeine Redis(常用…
阅读更多...
《洛谷深入浅出进阶篇》p2568 GCD

《洛谷深入浅出进阶篇》p2568 GCD

P2568 GCD - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P2568 大致题意&#xff1a;给定正整数n&#xff0c;求1< x,y<n 且 gcd&#xff08;x&#xff0c;y&#xff09;为素数的数对&#xff08;x&#xff0c;y&#xff09;有多少对。…
阅读更多...
Power BI - 5分钟学习透视列

Power BI - 5分钟学习透视列

每天5分钟&#xff0c;今天介绍Power BI透视列功能 什么是透视列&#xff1f; 透视列就是把行数据转换成列数据&#xff0c;也就是大家在工作中常说的行转列。 如何进行逆透视操作&#xff1a; 1&#xff0c;导入的【Sales】表&#xff0c;样例内容如下&#xff1a; 2, 【Ho…
阅读更多...
智能优化算法应用：基于食肉植物算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于食肉植物算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于食肉植物算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于食肉植物算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.食肉植物算法4.实验参数设定5.算法结果6.参考…
阅读更多...
leetcode 面试题 02.02. 返回倒数第k个节点

leetcode 面试题 02.02. 返回倒数第k个节点

提建议就是&#xff0c;有些题还是有联系的&#xff0c;建议就收看完 876.链表的中间节点&#xff08;http://t.csdnimg.cn/7axLa&#xff09;&#xff0c;再将这一题联系起来 面试题 02.02. 返回倒数第k个节点 题目&#xff1a; 实现一种算法&#xff0c;找出单向链表中倒数第…
阅读更多...
2023年加拿大百倍股研究报告

2023年加拿大百倍股研究报告

前言 股市中的百倍股&#xff0c;即那些在短期内实现超过百倍增长的股票&#xff0c;常引发投资者的深度关注和震撼。这类股票的成功并非偶然&#xff0c;而是基于公司或行业坚实的基础和长期的努力。千际投行策划的系列百倍股报告旨在为投资者提供深刻的洞察力和启示&#xf…
阅读更多...
题目：挑选子串（蓝桥OJ 1621）

题目：挑选子串（蓝桥OJ 1621）

题目描述&#xff1a; 解题思路&#xff1a; 采用双指针的快慢指针。与蓝桥OJ1372类似。 图解 题解&#xff1a; #include <bits/stdc.h> using namespace std;const int N 1e5 9; int a[N];int main() {ios::sync_with_stdio(0), cin.tie(0), cout.tie(0);int n, m…
阅读更多...
轮询分区的设置

轮询分区的设置

终于可以写MPI了&#xff0c;没想到&#xff0c;刚开始就当头一棒&#xff0c;我按照之前的配置MPI环境&#xff0c;配置完成就报错 好家伙&#xff0c;仔细检查了每一个步骤都没找到问题&#xff0c;上网搜索了一些解决方案&#xff0c;也没有解决。所幸&#xff0c;在配置MPI…
阅读更多...
dll动态链接库【C#】

dll动态链接库【C#】

1说明&#xff1a; 在C#中&#xff0c;dll是添加 【类库】生成的。 2添加C#的dll&#xff1a; &#xff08;1&#xff09;在VS中新建一个Windows应用程序项目&#xff0c;并命名为TransferDll。 &#xff08;2&#xff09;打开Windows窗体设计器&#xff0c;从工具箱中为窗体…
阅读更多...
CSGO游戏盲盒开箱源码 盲盒对战、幸运开箱、积分商城、Fl盲盒

CSGO游戏盲盒开箱源码 盲盒对战、幸运开箱、积分商城、Fl盲盒

源码介绍&#xff1a; CSGO游戏盲盒开箱源码 盲盒对战、幸运开箱、积分商城、Fl盲盒。这个是一个新花样玩法的盲盒程序。 仅供学习&#xff0c;请勿商用&#xff01;请购买正版程序运营。 代码下载&#xff1a;百度网盘
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023