【零基础学鸿蒙】ArkTS开发语言介绍

在之前的教学中，我们学习了下载安装DevEco Studio等相关知识。今天开始讲ArkTS
1.1 TypeScrip快速入门

学习TypeScript对于HarmonyOS应用开发至关紧张。在HarmonyOS中，主力编程语言为ArKTS，它是基于TypeScript的一种语言，其通过与ArkUI框架的匹配，拓展了声明式UI和状态管理等本领，使开发者能够以更简便自然的方式开发跨端应用。TypeScript本身是JavaScript的超集，通过引入静态范例界说等特性，提高了代码的可维护性和可读性，有助于在编码阶段检测潜在错误，提高开发效率另外，学习TypeScript还为处理HarmonyOS应用中的UI和应用状态提供了更强大的支持，在并发任务方面也有相应的扩展。为了更好地对HarmonyOS进行开发需要掌握TypeScript语言，本接我们重点介绍TypeScript语言。
鸿蒙学习小助手V【hmos19】解答、咨询、项目实战
1.1.1 编程语言介绍

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的本领，让开发者以更简便、更自然的方式开发跨端应用。要相识什么是ArkTS，我们首先要相识下ArkTS、TypeScript和JavaScript之间的关系：

lJavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的欣赏结果。
lTypeScript 是 JavaScript 的一个超集，它扩展了 JavaScript 的语法，通过在JavaScript的基础上添加静态范例界说构建而成，是一个开源的编程语言。
lArkTS兼容TypeScript语言，拓展了声明式UI、状态管理、并发任务等本领。
在学习ArkTS声明式的相关语法之前，我们首先学习下TypeScript的基础语法。
1.1.2 基础范例

TypeScript支持一些基础的数据范例，如布尔型、数组、字符串等，下文举例几个较为常用的数据范例，我们来相识下他们的基本利用。
Ø布尔值
TypeScript中可以利用boolean来体现这个变量是布尔值，可以赋值为true大概false。比方我们这里可以设置IsDone为False来体现未完成。

1. let isDone: boolean = false;

复制代码

Ø数字
TypeScript里的所有数字都是浮点数，这些浮点数的范例是 number。除了支持十进制，还支持二进制、八进制、十六进制。如下我们用十进制、二进制、八进制和十六进制分别界说了2023，当把数据通过日志方式打印出来，结果都会转换为十进制，也都是2023。

1. let decLiteral: number = 2023;
3. let binaryLiteral: number = 0b11111100111;
5. let octalLiteral: number = 0o3747;
7. let hexLiteral: number = 0x7e7;

复制代码

Ø字符串
TypeScript里利用 string体现文本数据范例， 可以利用双引号（ "）或单引号（'）体现字符串。比方我们这里界说Name是一个字符串范例，其数值我们可以用双引号大概单引号包裹起来。

1. let name: string = "Jacky";
3. name = "Tom";
5. name = 'Mick';

复制代码

Ø数组
TypeScrip有两种方式可以界说数组。第一种，可以在元素范例背面接上 []，体现由此范例元素组成的一个数组。

1. let list: number[] = [1, 2, 3];

复制代码

第二种方式是利用数组泛型，Array<元素范例>。

1. let list: Array<number> = [1, 2, 3];

复制代码

Ø元组
元组范例允许体现一个已知元素数量和范例的数组，各元素的范例不必相同。 比如，你可以界说一对值分别为 string和number范例的元组。
比方这里我们界说了一个X元组，范例为String和Number。第一行的赋值和我们元组界说的次序是划一的，这种是正确的。第二行先赋值Number后赋值String，这种赋值的次序和我们界说的不划一，所以是错误的。

1. let x: [string, number];
3. x = ['hello', 10]; // OK
5. x = [10, 'hello']; // Error

复制代码

Ø罗列
enum范例是对JavaScript尺度数据范例的一个补充，利用罗列范例可以为一组数值赋予友好的名字。比方我们这里界说Color为Red, Green和Blue，到时候就可以利用Color.Green来界说颜色。

1. enum Color {Red, Green, Blue};
3. let c: Color = Color.Green;

复制代码

ØUnknown
有时候，我们会想要为那些在编程阶段还不清楚范例的变量指定一个范例。这种情况下，我们不希望范例查抄器对这些值进行查抄而是直接让它们通过编译阶段的查抄。那么我们可以利用unknown范例来标志这些变量。
如下案例中，这里的Not Sure界说为Unknown后，我们可以赋值为Number范例，也可以赋值为String范例，还可以赋值为false范例。

1. let notSure: unknown = 4;
3. notSure = 'maybe a string instead';
5. notSure = false;

复制代码

ØVoid
当一个函数没有返回值时，你通常会见到其返回值范例是 void。如下的test方法，其返回范例就是Void。

1. function test(): void {
3.    console.log('This is function is void');
5. }

复制代码

ØNull 和 Undefined
TypeScript里，undefined和null两者各自有自己的范例分别叫做undefined和null。

1. let u: undefined = undefined;
3. let n: null = null;

复制代码

Ø联合范例
联合范例（Union Types）体现取值可以为多种范例中的一种。比方我们这里界说MyFavoriteNumber为联合范例，其取值可以是String大概Number，我们可以给其赋值为字符串7，也可以给其赋值为Number范例7。联合范例在日常的利用过程中用的比力多，大家要掌握这种界说方式。

1. let myFavoriteNumber: string | number;
3. myFavoriteNumber = 'seven';
5. myFavoriteNumber = 7;

复制代码

1.1.3 条件语句

条件语句用于基于不同的条件来执行不同的动作。TypeScript 条件语句是通过一条或多条语句的执行结果（True 或 False）来决定执行的代码块。
Øif 语句
TypeScript if 语句由一个布尔表达式后跟一个或多个语句组成。比方，如下代码中是一个If语句，界说的Number为5，判断的条件是Number大于0，程序满足这个条件会输出数字为正数。

1. var num:number = 5
3. if (num > 0) {
5.    console.log('数字是正数')
7. }

复制代码

Øif…else 语句
一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。如下代码中声明一个If-else语句，界说的Number是12，符合Number对2取余即是0的条件，所以输出为偶数。

1. var num:number = 12;
3. if (num % 2==0) {
5.     console.log('偶数');
7. } else {
9.     console.log('奇数');
11. }

复制代码

Øif…else if…else 语句
if…else if…else 语句在执行多个判断条件的时候很有效。如下代码中是一个If-else语句，界说的Number为0，满足最后的else条件，所以输出为0。

1. var num:number = 0
3. if(num > 0) {
5.     console.log(num+' 是正数')
7. } else if(num < 0) {
9.     console.log(num+' 是负数')
11. } else {
13.     console.log(num+' 为0')
15. }

复制代码

Øswitch…case 语句
除了可以通过If-else语句进行条件判断外，还可以通过Switch-case语句进行条件判断。一个 switch 语句允许测试一个变量即是多个值时的情况。每个值称为一个 case，且被测试的变量会对每个 switch case 进行查抄。
如下代码中我们有4个Case条件，分别是A输出日志优，B输出日志良，C输出日志及格，D输出日志不及格，最后还有一个default条件，当输入的字符不在ABCD中则体现非法输入，最后我们界说的Grade为A，所以这个代码打印的日志为优。

1. var grade:string = 'A';
3. switch(grade) {
5.     case 'A': {
7.         console.log('优');
9.         break;
11.     }
13.     case 'B': {
15.         console.log('良');
17.         break;
19.     }
21.     case 'C': {
23.         console.log('及格');
25.         break;   
27.     }
29.     case 'D': {
31.         console.log('不及格');
33.         break;
35.     }  
37.     default: {
39.         console.log('非法输入');
41.         break;              
43.     }
45. }

复制代码

1.1.4 函数

函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回范例和参数。TypeScript可以创建闻名字的函数和匿名函数，其创建方法如下：

1. // 有名函数
3. function add(x, y) {
5.   return x + y;
7. }
11. // 匿名函数
13. let myAdd = function (x, y) {
15.   return x + y;
17. };

复制代码

Ø为函数界说范例
为了确保输入输出的正确性，我们可以为上面谁人函数添加范例：
// 闻名函数：给变量设置为number范例

1. function add(x: number, y: number): number {
3.   return x + y;
5. }
9. // 匿名函数：给变量设置为number类型
11. let myAdd = function (x: number, y: number): number {
13.   return x + y;
15. };

复制代码

以上函数的名称叫做Add，实现的是两个数值的累加，参数是X和Y两个number范例的数字，返回值是X+Y的结果。其返回的范例也是number范例，上面一个函数是闻名函数，下面一个函数是匿名函数，匿名函数没有函数名，但其作用是一样的。
Ø可选参数
在TypeScript里我们可以在参数名旁利用 ?实现可选参数的功能。比如，我们想让lastName是可选的。利用了可选参数后，我们在调用函数的时候就可以传入一个参数大概两个参数，如Result1和Result2中的代码所示：

1. function buildName(firstName: string, lastName?: string) {
3.     if (lastName)
5.         return firstName + ' ' + lastName;
7.     else
9.         return firstName;
11. }
15. let result1 = buildName('Bob');
17. let result2 = buildName('Bob', 'Adams');

复制代码

Ø剩余参数
函数的入参除了可以利用可选参数外，还可以利用剩余参数。剩余参数会被当做个数不限的可选参数，可以一个都没有，同样也可以有任意个。 可以利用省略号（ …）进行界说。如下代码中，我们调用getEmployeeName方法时，可以只传入firstName，也就是Joseph，不传入剩余参数，也可以传入多个剩余参数：Samuel,Lucas,MacKinzie等。

1. function getEmployeeName(firstName: string, ...restOfName: string[]) {
3.   return firstName + ' ' + restOfName.join(' ');
5. }
9. let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');

复制代码

Ø箭头函数
ES6版本的TypeScript提供了一个箭头函数，它是界说匿名函数的简写语法，用于函数表达式，它省略了function关键字。箭头函数的界说如下，其函数是一个语句块：

1. ( [param1, parma2,…param n] )=> {
3.     // 代码块
5. }

复制代码

此中，括号内是函数的入参，可以有0到多个参数，箭头后是函数的代码块。我们可以将这个箭头函数赋值给一个变量，如下所示：

1. let arrowFun = ( [param1, parma2,…param n] )=> {
3.     // 代码块
5. }

复制代码

如何要主动调用这个箭头函数，可以按如下方法去调用：

1. arrowFun(param1, parma2,…param n)

复制代码

接下来我们看看如何将我们熟悉的函数界说方式转换为箭头函数。我们可以界说一个判断正负数的函数，如下：

1. function testNumber(num: number) {
3.   if (num > 0) {
5.     console.log(num + ' 是正数');
7.   } else if (num < 0) {
9.     console.log(num + ' 是负数');
11.   } else {
13.     console.log(num + ' 为0');
15.   }
17. }

复制代码

其调用方法如下：
testNumber(1) //输出日志：1 是正数
如果将这个函数界说为箭头函数，界说如下所示：

1. let testArrowFun = (num: number) => {
3.   if (num > 0) {
5.     console.log(num + ' 是正数');
7.   } else if (num < 0) {
9.     console.log(num + ' 是负数');
11.   } else {
13.     console.log(num + ' 为0');
15.   }
17. }

复制代码

其调用方法如下：
testArrowFun(-1) //输出日志：-1 是负数
背面，我们在学习HarmonyOS应用开发时会经常用到箭头函数。比方，给一个按钮添加点击事件，此中onClick事件中的函数就是箭头函数。

1. Button("Click Now")
3.   .onClick(() => {
5.     console.info("Button is click")
7.   })

复制代码

1.1.5 类

TypeScript支持基于类的面向对象的编程方式，界说类的关键字为 class，背面紧跟类名。类描述了所创建的对象共同的属性和方法。
Ø类的界说
比方，我们可以声明一个Person类，这个类有3个成员：一个是属性（包含name和age)，一个是构造函数，一个是getPersonInfo方法，其界说如下所示。

1. class Person {
3.   private name: string
5.   private age: number
9.   constructor(name: string, age: number) {
11.     this.name = name;
13.     this.age = age;
15.   }
19.   public getPersonInfo(): string {
21.     return `My name is ${this.name} and age is ${this.age}`;
23.   }
25. }

复制代码

通过上面的Person类，我们可以界说一个人物Jacky并获取他的基本信息，其界说如下，我们可以利用new方法，传入person的姓名和年龄，创建为person1对象，person1可以调用此中的公有属性的方法，也就是getpersoninfo方法，这个是一个最简单的类的界说和调用。当然类内里还有很多的知识，比如我们可以通过修改修饰符，private public等来控制属性和方法的访问权限，这些知识大家可以参考TS的相关文档进行自行学习。

1. let person1 = new Person('Jacky', 18);
3. person1.getPersonInfo();

复制代码

Ø继续
继续就是子类继续父类的特征和行为，使得子类具有父类相同的行为。TypeScript中允许利用继续来扩显现有的类，对应的关键字为extends。如下案例中，我们界说employee是继续于person的employee叫person新增了一个属性department，我们可以如许去界说它的构造方法，通过super关键字实际上就调用了person中的构造方法，初始化name和age，并在构造方法中初始化好了department，employee有个公有方法，getemployeeinfo获取雇员的信息，此中调用getpersoninfo来获取雇员的姓名、年龄信息。

1. class Employee extends Person {
3.   private department: string
7.   constructor(name: string, age: number, department: string) {
9.     super(name, age);
11.     this.department = department;
13.   }
17.   public getEmployeeInfo(): string {
19.     return this.getPersonInfo() + ` and work in ${this.department}`;
21.   }
23. }

复制代码

通过上面的Employee类，我们可以界说一个人物Tom，这里可以获取他的基本信息，也可以获取他的雇员信息，其界说如下：

1. let person2 = new Employee('Tom', 28, 'HuaWei');
3. person2.getPersonInfo();
5. person2.getEmployeeInfo();

复制代码

在TypeScript中，有public、private、protected修饰符，其功能和具体利用场景大家可以参考TypeScript的相关学习资料，进行拓展学习。
1.1.6 模块

随着应用越来越大，通常要将代码拆分成多个文件，即所谓的模块（module）。模块可以相互加载，并可以利用特别的指令 export 和 import 来互换功能，从另一个模块调用一个模块的函数。
两个模块之间的关系是通过在文件级别上利用 import 和 export 建立的。模块内里的变量、函数和类等在模块外部是不可见的，除非明确地利用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。
Ø导出
任何声明（比如变量，函数，类，范例别名或接口）都能够通过添加export关键字来导出，比方我们要把NewsData这个类导出，代码表示如下：

1. export class NewsData {
3.   title: string;
5.   content: string;
7.   imagesUrl: Array<NewsFile>;
9.   source: string;
13.   constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
15.     this.title = title;
17.     this.content = content;
19.     this.imagesUrl = imagesUrl;
21.     this.source = source;
23.   }
25. }

复制代码

Ø导入
模块的导入操纵与导出一样简单。 可以利用以下 import形式之一来导入别的模块中的导出内容。

1. import { NewsData } from '../common/bean/NewsData';

复制代码

以上案例中，我们在一个文件中界说了一个类news data，我们要在其他文件中引用这个类，首先就需要在这个类的前面加一个修饰符export，之后我们可以利用import来导入这个类,这个类的具体路径是填写在form背面的。export进来后，我们就可以在这个模块中引用其他模块中界说的NewsData。
1.1.7 可迭代对象

当一个对象实现了Symbol.iterator属性时，我们认为它是可迭代的。一些内置的范例如Array，Map，Set，String，Int32Array，Uint32Array等都具有可迭代性。
Øfor…of 语句
for…of会遍历可迭代的对象，调用对象上的Symbol.iterator方法。下面是在数组上利用for…of的简单例子，如这里定了一个someArray 数组，利用for-of语句进行循环遍历，可以打印这个数组中的元素。

1. let someArray = [1, "string", false];
5. for (let entry of someArray) {
7.     console.log(entry); // 1, "string", false
9. }

复制代码

Øfor…of vs. for…in 语句
for…of和for…in均可迭代一个列表，但是用于迭代的值却不同：for…in迭代的是对象的键，而for…of则迭代的是对象的值。如下，for…in打印的是数组的下标。

1. let list = [4, 5, 6];
5. for (let i in list) {
7.     console.log(i); // "0", "1", "2",
9. }
13. for (let i of list) {
15.     console.log(i); // "4", "5", "6"
17. }

复制代码

1.1.8 DevEco Studio中设置TypeScript

设置node.js的情况变量：

安装 typescript：

1. npm install -g typescript

复制代码

安装完成后我们可以利用tsc 命令来执行 TypeScript 的相关代码，以下是检察版本号：

1. $ tsc -v
3. Version 5.3.2

复制代码

1.1 初识ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继续了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，发起开发者具备TS语言开发本领。
当前，ArkTS在TS的基础上主要扩展了如下本领：
l基本语法：ArkTS界说了声明式UI描述、自界说组件和动态扩展UI元素的本领，再配合ArkUI开发框架中的体系组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
l状态管理：ArkTS提供了多维度的状态管理机制。在UI开发框架中，与UI相关联的数据可以在组件内利用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变动的双向传递。开发者可以灵活的利用这些本领来实现数据和UI的联动。
l渲染控制：ArkTS提供了渲染控制的本领。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
未来，ArkTS会联合应用开发/运行的需求连续演进，渐渐提供并行和并发本领加强、体系范例加强、分布式开发范式等更多特性。
1.2 ArkTS基本语法

1.2.1 基本语法概述

在开端相识了ArkTS语言之后，我们以一个具体的示例来说明ArkTS的基本组成。该案例中当开发者点击按钮时，文本内容从“Hello World”变为“Hello ArkUI”,创建步骤如下。
1)打开 DevEvo Studio开发工具，新建项目
项目创建完成，进入该项目等待项目初始化完成即可：
2)在Index.ets中写入如下代码

1. @Entry
2. @Component
3. struct Hello {
4.   @State myText: string = 'World'
6.   build() {
7.     Column(){
8.       Text(`Hello ${this.myText}`)
9.         .fontSize(50)
10.       Divider()
11.       Button('Click me')
12.         .onClick(()=>{
13.           this.myText='ArkUI'
14.         })
15.         .height(50)
16.         .width(100)
17.         .margin({top:20})
18.     }
19.   }
20. }

复制代码

对以上代码详细表明如下：

1. //@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。
2. @Entry
3. /**
4. * @Component是一种装饰器，代表自定义组件，用@Component 装饰的 struct Hello 代表一个自定义的结构体，名字是Hello，是可重用的UI单元，可以与其他组件组合。
5. */
6. @Component
7. struct Hello {
8.   //@State 是一种装饰器，被它装饰的变量 myText 值发生改变时，会触发该变量所对应的自定义组件 Hello 的 UI 界面进行自动刷新。
9.   @State myText: string = 'World'
11.   //build 方法中的代码块表示UI描述，以声明式的方式描述UI结构。
12.   build() {
13.     //Column 是内置组件，表示设置一列
14.     Column(){
15.       //设置文本及内容
16.       Text(`Hello ${this.myText}`)
17.         .fontSize(50)//设置文本大小
18.       Divider() //Divider 提供分隔器组件，分隔不同内容块/内容元素。
19.       //设置按钮
20.       Button('Click me')
21.         //设置按钮点击事件，点击按钮时将 myText 由 World 改变成 ArkUI
22.         .onClick(()=>{
23.           this.myText='ArkUI'
24.         })
25.         .height(50) //设置按钮高度
26.         .width(100) //设置按钮宽度
27.         .margin({top:20}) //设置按钮外边距
28.     }
29.   }
30. }

复制代码

3)打开预览，验证组件功能
当点击“Click me”按钮时，“Hello World”变换成“Hello ArkUI”。
在以上示例中，ArkTS的基本组成如下所示。
l装饰器： 用于装饰类、结构、方法以及变量，并赋予其特别的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component体现自界说组件，@Entry体现该自界说组件为入口组件，@State体现组件中的状态变量，状态变量变化会触发UI刷新。
lUI描述：以声明式的方式来描述UI的结构，比方build()方法中的代码块。
l自界说组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
l体系组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
l属性方法：组件可以通过链式调用设置多项属性，如fontSize()、width()、height()、backgroundColor()等。
l事件方法：组件可以通过链式调用设置多个事件的相应逻辑，如跟随在Button背面的onClick()。
体系组件、属性方法、事件方法具体利用可参考基于ArkTS的声明式开发范式。除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：
l@Builder/@BuilderParam：特别的封装UI描述的方法，细粒度的封装和复用UI描述。
l@Extend/@Style：扩展内置组件和封装属性样式，更灵活地组合内置组件。
lstateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。
1.2.2 声明式UI概述

ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件设置方法，帮助开发者实现应用交互逻辑。
1.2.2.1 创建组件

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。创建组件时不需要new运算符。
l无参数
如果组件的接口界说没有包含必选构造参数，则组件背面的“()”不需要设置任何内容。比方，Divider组件不包含构造参数：

1. Column() {
3.   Text('item 1')
5.   Divider()
7.   Text('item 2')
9. }

复制代码

示例演示：

1. @Entry
2. @Component
3. struct UITest {
4.   build() {
5.     Column() {
6.       Text('item 1')
7.       Divider()
8.       Text('item 2')
9.     }
10.   }

复制代码

预览如下：
l有参数
如果组件的接口界说包含构造参数，则在组件背面的“()”设置相应参数。
a.Image组件的必选参数src。

1. Image('https://xyz/test.jpg')

复制代码

b.Text组件的非必选参数content。

1. // string类型的参数
3. Text('test')
5. // $r形式引入应用资源，可应用于多语言场景
7. Text($r('app.string.title_value'))
9. // 无参数形式
11. Text()

复制代码

c.变量或表达式也可以用于参数赋值，此中表达式返回的结果范例必须满足参数范例要求。

1. Image(this.imagePath)
3. Image('https://' + this.imageUrl)
5. Text(`count: ${this.count}`)

复制代码

示例演示：

1. @Entry
2. @Component
3. struct UITest {
4.   build() {
5.     Column() {
6.       Image('https://img0.baidu.com/it/u=110176915,621401482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=665')
7.         .height(500)
8.       Text('美女')
9.     }
10.   }
11. }

复制代码

预览如下：
1.2.2.2 设置属性

属性方法以“.”链式调用的方式设置体系组件的样式和其他属性，发起每个属性方法单独写一行。
l设置Text组件的字体巨细。

1. Text('test')
3.   .fontSize(12)

复制代码

l设置组件的多个属性。

1. Image('test.jpg')
3.   .alt('error.jpg')   
5.   .width(100)   
7.   .height(100)

复制代码

l除了直接传递常量参数外，还可以传递变量或表达式。

1. Text('hello')
3.   .fontSize(this.size)
5. Image('test.jpg')
7.   .width(this.count % 2 === 0 ? 100 : 200)   
9.   .height(this.offset + 100)

复制代码

l对于体系组件，ArkUI还为其属性预界说了一些罗列范例供开发者调用，罗列范例可以作为参数传递，但必须满足参数范例要求。
比方，可以按以下方式设置Text组件的颜色和字体样式。

1. Text('hello')
3.   .fontSize(20)
5.   .fontColor(Color.Red)
7.   .fontWeight(FontWeight.Bold)

复制代码

示例：

1. @Entry
2. @Component
3. struct UITest {
4.   textSize: number = 50;
5.   count:number = 2;
6.   imageOffset:number = 700;
8.   build() {
9.     Column(){
10.       Text("Hello ArkTS")
11.         .fontSize(this.textSize)
12.         .fontColor(Color.Red)
13.         .fontWeight(FontWeight.Bold)
15.       Image('https://img0.baidu.com/it/u=110176915,621401482&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=665')
16.         .width(this.count%2 === 0?500:200)
17.         .height(this.imageOffset + 100)
18.     }
20.   }
21. }

复制代码

预览如下：
鸿蒙学习小助手V【hmos19】解答、咨询、项目实战
1.2.2.3 设置事件

事件方法以“.”链式调用的方式设置体系组件支持的事件，发起每个事件方法单独写一行。
l利用箭头函数设置组件的事件方法。

1. Button('Click me')
3.   .onClick(() => {
5.     this.myText = 'ArkUI';
7.   })

复制代码

l利用匿名函数表达式设置组件的事件方法，要求利用bind，以确保函数体中的this指向当前组件。

1. Button('add counter')
3.   .onClick(function(){
5.     this.counter += 2;
7.   }.bind(this))
9. l使用组件的成员函数配置组件的事件方法。
11. myClickHandler(): void {
13.   this.counter += 2;
15. }
17. ...
19. Button('add counter')
21.   .onClick(this.myClickHandler.bind(this))

复制代码

示例：

1. @Entry
2. @Component
3. struct UITest {
4.   @State textSize: number = 20;
6.   myClickHandler(): void {
7.     this.textSize += 10;
8.   }
10.   build() {
11.     Column() {
12.       Text("Hello ArkTS")
13.         .fontSize(this.textSize)
14.         .fontColor(Color.Red)
15.         .fontWeight(FontWeight.Bold)
16.       Divider()
17.       Button("增大字体")
18.         .height(50)
19.         .width(100)
20.         .margin(20)
21.         .onClick(this.myClickHandler.bind(this))
22.     }
23.   }
24. }

复制代码

预览如下，每次点击“增大字体”按钮后，“Hello ArkTS”都会变大。
1.2.2.4 设置子组件

如果组件支持子组件设置，则需在尾随闭包"{…}"中为组件添加子组件的UI描述。Column、Row、Stack、Grid、List等组件都是容器组件。
l以下是简单的Column组件设置子组件的示例。
Column() {
Text(‘Hello’)

1. .fontSize(100)

复制代码

Divider()
Text(this.myText)

1. .fontSize(100)
3. .fontColor(Color.Red)

复制代码

}
l容器组件均支持子组件设置，可以实现相对复杂的多级嵌套。
Column() {
Text(‘Hello’)

1. .fontSize(100)

复制代码

Divider()
Text(this.myText)

1. .fontSize(100)
3. .fontColor(Color.Red)

复制代码

}
1.2.3 基础组件-Text

Text组件是可以显示一段文本的组件。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中利用。
1.2.3.1 用法
该组件利用方式如下：

1. Text(content?: string | Resource)

复制代码

以上参数表明如下:

Text组件支持很多通用属性，如：width、height等，还支持如部属性：

鸿蒙学习小助手V【hmos19】解答、咨询、项目实战

1.2.3.2 示例

以下代码界说了一个名为 TextExample1 的组件，用于展示不同文本样式的结果，包括文本对齐、文本溢出处理和行高设置。

1. @Entry  // 使用 @Entry 装饰器标识这是一个入口组件。
2. @Component  // 使用 @Component 装饰器定义一个新组件。
3. struct TextExample1 {  // 定义名为 TextExample1 的结构体，代表这个组件。
5.   build() {  // 定义 build 方法来构建UI。
6.     Flex({  // 创建一个弹性布局容器。
7.       direction: FlexDirection.Column,  // 设置布局方向为垂直列。
8.       alignItems: ItemAlign.Start,  // 设置子项沿主轴的起始位置对齐。
9.       justifyContent: FlexAlign.SpaceBetween  // 设置子项间距均匀分布。
10.     }) {
11.       // 文本水平方向对齐方式设置
12.       // 单行文本
13.       Text('textAlign').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件，说明接下来的文本对齐设置。
15.       Text('TextAlign set to Center.')  // 创建一个文本组件，文本居中对齐。
16.         .textAlign(TextAlign.Center)  // 设置文本对齐方式为居中。
17.         .fontSize(12)  // 设置字体大小为12。
18.         .border({ width: 1 })  // 设置边框宽度为1。
19.         .padding(10)  // 设置内边距为10。
20.         .width('100%')  // 设置宽度为100%。
22.       Text('TextAlign set to Start.')  // 创建一个文本组件，文本起始对齐。
23.         .textAlign(TextAlign.Start)  // 设置文本对齐方式为起始对齐。
24.         .fontSize(12)  // 设置字体大小为12。
25.         .border({ width: 1 })  // 设置边框宽度为1。
26.         .padding(10)  // 设置内边距为10。
27.         .width('100%')  // 设置宽度为100%。
29.       Text('TextAlign set to End.')  // 创建一个文本组件，文本结束对齐。
30.         .textAlign(TextAlign.End)  // 设置文本对齐方式为结束对齐。
31.         .fontSize(12)  // 设置字体大小为12。
32.         .border({ width: 1 })  // 设置边框宽度为1。
33.         .padding(10)  // 设置内边距为10。
34.         .width('100%')  // 设置宽度为100%。
36.       // 多行文本
37.       Text('This is the text content with textAlign set to Center.')  // 创建一个多行文本组件，文本居中对齐。
38.         .textAlign(TextAlign.Center)  // 设置文本对齐方式为居中。
39.         .fontSize(12)  // 设置字体大小为12。
40.         .border({ width: 1 })  // 设置边框宽度为1。
41.         .padding(10)  // 设置内边距为10。
42.         .width('100%')  // 设置宽度为100%。
44.       Text('This is the text content with textAlign set to Start.')  // 创建一个多行文本组件，文本起始对齐。
45.         .textAlign(TextAlign.Start)  // 设置文本对齐方式为起始对齐。
46.         .fontSize(12)  // 设置字体大小为12。
47.         .border({ width: 1 })  // 设置边框宽度为1。
48.         .padding(10)  // 设置内边距为10。
49.         .width('100%')  // 设置宽度为100%。
51.       Text('This is the text content with textAlign set to End.')  // 创建一个多行文本组件，文本结束对齐。
52.         .textAlign(TextAlign.End)  // 设置文本对齐方式为结束对齐。
53.         .fontSize(12)  // 设置字体大小为12。
54.         .border({ width: 1 })  // 设置边框宽度为1。
55.         .padding(10)  // 设置内边距为10。
56.         .width('100%')  // 设置宽度为100%。
58.       // 文本超长时显示方式
59.       Text('TextOverflow+maxLines').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件，说明接下来的文本溢出设置。
61.       // 超出maxLines截断内容展示
62.       Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content. This is the setting of textOverflow to Clip text content This is the setting of textOverflow to None text content.')
63.         .textOverflow({ overflow: TextOverflow.Clip })  // 设置文本溢出方式为剪裁（Clip）。
64.         .maxLines(1)  // 设置最大行数为1。
65.         .fontSize(12)  // 设置字体大小为12。
66.         .border({ width: 1 })  // 设置边框宽度为1。
67.         .padding(10)  // 设置内边距为10。
69.       // 超出maxLines展示省略号
70.       Text('This is set textOverflow to Ellipsis text content This is set textOverflow to Ellipsis text content.'.split('')
71.         .join('\u200B'))
72.         .textOverflow({ overflow: TextOverflow.Ellipsis })  // 设置文本溢出方式为省略号（Ellipsis）。
73.         .maxLines(1)  // 设置最大行数为1。
74.         .fontSize(12)  // 设置字体大小为12。
75.         .border({ width: 1 })  // 设置边框宽度为1。
76.         .padding(10)  // 设置内边距为10。
78.       Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)  // 创建一个文本组件，说明接下来的行高设置。
80.       // 设置文本的行高
81.       Text('This is the text with the line height set. This is the text with the line height set.')
82.         .fontSize(12)  // 设置字体大小为12。
83.         .border({ width: 1 })  // 设置边框宽度为1。
84.         .padding(10)  // 设置内边距为10。
85.       Text('This is the text with the line height set. This is the text with the line height set.')
86.         .fontSize(12)  // 设置字体大小为12。
87.         .border({ width: 1 })  // 设置边框宽度为1。
88.         .padding(10)  // 设置内边距为10。
89.         .lineHeight(20)  // 设置行高为20。
90.     }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })  // 设置容器的高度、宽度和内边距。
91.   }
92. }

复制代码

以上代码预览如下：
1.2.4 容器组件-Column

Column容器组件是沿垂直方向布局的容器。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中利用。其可以包含子组件。
1.2.4.1 用法

Column组件用法如下：

1. Column(value?: {space?: string | number})

复制代码

以上参数表明如下：

Column组件支持很多通用属性，如：width、height等，还支持如部属性：

1.2.4.2 示例

以下代码界说了一个名为 ColumnExample 的组件，用于展示 Column 布局的不同特性，包括子元素间距、对齐方式和配景颜色。鸿蒙学习小助手V【hmos19】解答、咨询、项目实战

1. @Entry  // 使用 @Entry 装饰器标识这是一个入口组件。
2. @Component  // 使用 @Component 装饰器定义一个新组件。
3. struct ColumnExample {  // 定义名为 ColumnExample 的结构体，代表这个组件。
5.   build() {  // 定义 build 方法来构建UI。
6.     Column({ space: 5 }) {  // 创建一个 Column 组件，设置子元素间的垂直间距为5。
7.       Text('space').width('90%')  // 创建一个 Text 组件，说明接下来的内容与space属性相关。
9.       Column({ space: 5 }) {  // 创建一个内部 Column 组件，再次设置子元素间的垂直间距为5。
10.         Column().width('100%').height(30).backgroundColor(0xAFEEEE)  // 创建一个 Column 子组件，设置宽度、高度和背景颜色为浅蓝色。
11.         Column().width('100%').height(30).backgroundColor(0x00FFFF)  // 创建另一个 Column 子组件，设置宽度、高度和背景颜色为青色。
12.       }.width('90%').height(100).border({ width: 1 })  // 为这个内部 Column 设置宽度、高度和边框。
14.       // 设置子元素水平方向对齐方式
15.       Text('alignItems(Start)').width('90%')  // 创建一个 Text 组件，说明接下来的内容与水平起始对齐相关。
16.       Column() {  // 创建一个 Column 组件。
17.         Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建一个子 Column，设置宽度、高度和背景颜色为浅蓝色。
18.         Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column，设置宽度、高度和背景颜色为青色。
19.       }.alignItems(HorizontalAlign.Start).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平起始对齐、宽度和边框。
21.       Text('alignItems(End)').width('90%')  // 创建一个 Text 组件，说明接下来的内容与水平结束对齐相关。
22.       Column() {  // 创建一个 Column 组件。
23.         Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件，设置同上。
24.         Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件，设置同上。
25.       }.alignItems(HorizontalAlign.End).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平结束对齐、宽度和边框。
27.       Text('alignItems(Center)').width('90%')  // 创建一个 Text 组件，说明接下来的内容与水平居中对齐相关。
28.       Column() {  // 创建一个 Column 组件。
29.         Column().width('50%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件，设置同上。
30.         Column().width('50%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件，设置同上。
31.       }.alignItems(HorizontalAlign.Center).width('90%').border({ width: 1 })  // 为这个 Column 设置子元素水平居中对齐、宽度和边框。
33.       // 设置子元素垂直方向的对齐方式
34.       Text('justifyContent(Center)').width('90%')  // 创建一个 Text 组件，说明接下来的内容与垂直居中对齐相关。
35.       Column() {  // 创建一个 Column 组件。
36.         Column().width('90%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件，设置宽度、高度和背景颜色为浅蓝色。
37.         Column().width('90%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件，设置宽度、高度和背景颜色为青色。
38.       }.height(100).border({ width: 1 }).justifyContent(FlexAlign.Center)  // 为这个 Column 设置高度、边框和子元素垂直居中对齐。
40.       Text('justifyContent(End)').width('90%')  // 创建一个 Text 组件，说明接下来的内容与垂直结束对齐相关。
41.       Column() {  // 创建一个 Column 组件。
42.         Column().width('90%').height(30).backgroundColor(0xAFEEEE)  // 创建子 Column 组件，设置同上。
43.         Column().width('90%').height(30).backgroundColor(0x00FFFF)  // 创建另一个子 Column 组件，设置同上。
44.       }.height(100).border({ width: 1 }).justifyContent(FlexAlign.End)  // 为这个 Column 设置高度、边框和子元素垂直结束对齐。
45.     }.width('100%').padding({ top: 5 })  // 为最外层 Column 设置宽度和顶部内边距。
46.   }
47. }

复制代码

以上代码预览如下：
1.2.5 组件组件-Row
Row容器组件是沿水平方向布局容器。该组件从API Version 7开始支持，从API version 9开始，该接口支持在ArkTS卡片中利用。可以包含子组件。
1.2.5.1 用法

Row用法如下：

1. Row(value?:{space?: number | string })

复制代码

以上参数表明如下：

Row支持的属性如下：

更多示例可以加小助手获取…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。