鸿蒙HarmonyOS实战-ArkTS语言（基本语法）

 一、ArkTS语言基本语法

1.简介

HarmonyOS的ArkTS语言是一种基于TypeScript开发的语言，它专为HarmonyOS系统开发而设计。ArkTS语言结合了JavaScript的灵活性和TypeScript的严谨性，使得开发者能够快速、高效地开发出高质量的HarmonyOS应用程序。

ArkTS语言具有以下特点：

  1. 静态类型检查：开发者在编写代码时可以使用类型注解来进行类型检查，从而减少因类型错误而导致的bug。

  2. 异步/同步编程：ArkTS语言支持基于Promise和async/await的异步/同步编程方式，能够更好地处理异步操作。

  3. 内置模块：ArkTS语言内置了许多常用的模块，如文件系统、网络请求、图形渲染等，使得开发者不必自己编写这些模块。

  4. 兼容性：ArkTS语言使用TypeScript语法，可以与JavaScript代码无缝集成，并且可以编译成JavaScript代码来在其他平台上运行。

ArkTS语言基础类库是HarmonyOS系统上为应用开发者提供的常用基础能力，主要包含能力如下图所示：

在这里插入图片描述
ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。

ArkTS和HTML的差别：
在这里插入图片描述
在这里插入图片描述

2.TypeScript的基础语法

TypeScript是一种由微软开发的JavaScript超集语言，它支持JavaScript的所有语法，但添加了一些新的特性和语法，使开发更加可靠和高效。TypeScript最大的特点是引入了静态类型，开发者可以在编译时发现类型错误，提高代码的可维护性和可读性。

TypeScript代码可以在编译时被转换成JavaScript代码，在浏览器和Node.js环境下都可以运行。虽然TypeScript相对于JavaScript来说更加复杂，但是它可以帮助开发者更好地组织和管理复杂的项目，特别是在团队协作中提高代码的质量和可维护性。

TypeScript基础知识包括基本类型、变量声明、函数、类、接口、泛型等。另外，TypeScript还支持模块化开发，可以使用ES模块规范或者CommonJS规范导入和导出模块。在实际项目开发中，TypeScript还可以结合工具链如Webpack、Babel进行编译、打包等操作。

在这里插入图片描述
除了上面提到的变量声明、函数定义、类定义、接口定义和枚举类型外，TypeScript还有一些基础语法需要掌握：

2.1 类型注解

TypeScript的静态类型检查是通过类型注解实现的。在声明变量或函数时，可以使用冒号加上类型注解，指定变量或函数的类型。例如：

  1. let name: string = "TypeScript";
  2.  
  3. function add(a: number, b: number): number {
  4.     return a + b;
  5. }

2.2 接口

TypeScript的接口是用来描述对象的形状的。可以定义对象需要包含哪些属性和方法，以及它们的类型。例如：

  1. interface Person {
  2.     name: string;
  3.     age: number;
  4.     sayHello(): void;
  5. }
  6.  
  7. let tom: Person = {
  8.     name: "Tom",
  9.     age: 18,
  10.     sayHello: function() {
  11.         console.log(`Hello, my name is ${this.name}!`);
  12.     }
  13. };

2.3 泛型

TypeScript的泛型可以帮助我们编写更加灵活、可重用的代码。它允许在编写函数、类或接口时使用参数化类型，从而提高代码的通用性和可读性。例如：

  1. function identity<T>(arg: T): T {
  2.     return arg;
  3. }
  4.  
  5. let output = identity<string>("TypeScript");
  6. console.log(output); // 输出 TypeScript

2.4 类的继承

TypeScript的类可以继承其他类，从而实现代码的重用和扩展。通过关键字extends可以让一个类继承另一个类，并继承其属性和方法。例如：

  1. class Animal {
  2.     name: string;
  3.     constructor(name: string) {
  4.         this.name = name;
  5.     }
  6.     move(distance: number = 0) {
  7.         console.log(`${this.name} moved ${distance}m.`);
  8.     }
  9. }
  10.  
  11. class Dog extends Animal {
  12.     bark() {
  13.         console.log("Woof! Woof!");
  14.     }
  15. }
  16.  
  17. let dog = new Dog("Bobby");
  18. dog.move(10); // 输出 "Bobby moved 10m."
  19. dog.bark(); // 输出 "Woof! Woof!"

2.5 类的访问修饰符

TypeScript的类可以通过访问修饰符来控制类的属性和方法的访问权限。有三个访问修饰符可以使用：public、private和protected。默认情况下，都是public。

public：公共的，任何外部或内部都可以访问。

private：私有的，只有类的内部可以访问，外部无法访问。

protected：受保护的，只有类的内部和其子类可以访问，外部无法访问。

  1. class Person {
  2.     protected name: string;
  3.     constructor(name: string) {
  4.         this.name = name;
  5.     }
  6.     protected sayHello() {
  7.         console.log(`Hello, I'm ${this.name}.`);
  8.     }
  9. }
  10.  
  11. class Student extends Person {
  12.     constructor(name: string) {
  13.         super(name);
  14.     }
  15.     public sayHelloToTeacher(teacher: Person) {
  16.         console.log(`Hello, ${teacher.name}, I'm ${this.name}.`);
  17.     }
  18. }
  19.  
  20. let tom = new Student("Tom");
  21. let bob = new Person("Bob");
  22. tom.sayHelloToTeacher(bob); // 输出 "Hello, Bob, I'm Tom."
  23. bob.sayHello(); // 报错：属性 'sayHello' 受保护，只能在类 'Person' 及其子类中访问。

以上只是举例一些TS的基础语法，TS内容远不止这些不懂的可以去学学TS。

3.ArkTS的基本组成

在这里插入图片描述

  • 装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

  • UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。

  • 自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。

  • 系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。

  • 属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

  • 事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
    系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。

除此之外，ArkTS扩展了多种语法范式来使开发更加便捷：

  • @Builder/@BuilderParam：特殊的封装UI描述的方法，细粒度的封装和复用UI描述。
  • @Extend/@Style：扩展内置组件和封装属性样式，更灵活地组合内置组件。
  • stateStyles：多态样式，可以依据组件的内部状态的不同，设置不同样式。

4.自定义组件

  1. @Component
  2. struct HelloComponent {
  3.   @State message: string = 'Hello, World!';
  4.  
  5.   build() {
  6.     // HelloComponent自定义组件组合系统组件Row和Text
  7.     Row() {
  8.       Text(this.message)
  9.         .onClick(() => {
  10.           // 状态变量message的改变驱动UI刷新，UI从'Hello, World!'刷新为'Hello, ArkUI!'
  11.           this.message = 'Hello, ArkUI!';
  12.         })
  13.     }
  14.   }
  15. }
  16.  
  17. @Entry
  18. @Component
  19. struct ParentComponent {
  20.   build() {
  21.     Column() {
  22.       Text('ArkUI message')
  23.       HelloComponent({ message: 'Hello, World!' });
  24.       Divider()
  25.       HelloComponent({ message: '你好!' });
  26.     }
  27.   }
  28. }

  • struct：自定义组件基于struct实现，struct + 自定义组件名 +
    {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

  • build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

  • @Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。@Entry可以接受一个可选的LocalStorage的参数。

4.1 build()函数规范

1、根节点唯一

  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   build() {
  5.     // 根节点唯一且必要，必须为容器组件
  6.     Row() {
  7.       ChildComponent() 
  8.     }
  9.   }
  10. }
  11.  
  12. @Component
  13. struct ChildComponent {
  14.   build() {
  15.     // 根节点唯一且必要，可为非容器组件
  16.     Image('test.jpg')
  17.   }
  18. }

2、不允许声明本地变量、打印、作用域

  1. build() {
  2.   // 反例：不允许声明本地变量
  3.   let a: number = 1;
  4.   // 反例：不允许console.info
  5.   console.info('print debug log');
  6.   // 反例：不允许本地作用域
  7.   {
  8.     ...
  9.   }
  10. }
  11.

3、不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。

  1. @Component
  2. struct ParentComponent {
  3.   doSomeCalculations() {
  4.   }
  5.  
  6.   calcTextValue(): string {
  7.     return 'Hello World';
  8.   }
  9.  
  10.   @Builder doSomeRender() {
  11.     Text(`Hello World`)
  12.   }
  13.  
  14.   build() {
  15.     Column() {
  16.       // 反例：不能调用没有用@Builder装饰的方法
  17.       this.doSomeCalculations();
  18.       // 正例：可以调用
  19.       this.doSomeRender();
  20.       // 正例：参数可以为调用TS方法的返回值
  21.       Text(this.calcTextValue())
  22.     }
  23.   }
  24. }

4、不允许switch和表达式

  1. build() {
  2.   Column() {
  3.     // 反例：不允许使用switch语法
  4.     switch (expression) {
  5.       case 1:
  6.         Text('...')
  7.         break;
  8.       case 2:
  9.         Image('...')
  10.         break;
  11.       default:
  12.         Text('...')
  13.         break;
  14.     }
  15.     // 反例：不允许使用表达式
  16.     (this.aVar > 10) ? Text('...') : Image('...')
  17.   }
  18. }

5.页面和自定义组件生命周期

在这里插入图片描述
页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

  • onPageShow：页面每次显示时触发。
  • onPageHide：页面每次隐藏时触发一次。
  • onBackPress：当用户点击返回按钮时触发。

组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

  • aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
  • aboutToDisappear：在自定义组件即将析构销毁时执行。
  1. // Index.ets
  2. import router from '@ohos.router';
  3.  
  4. @Entry
  5. @Component
  6. struct MyComponent {
  7.   @State showChild: boolean = true;
  8.  
  9.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  10.   onPageShow() {
  11.     console.info('Index onPageShow');
  12.   }
  13.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  14.   onPageHide() {
  15.     console.info('Index onPageHide');
  16.   }
  17.  
  18.   // 只有被@Entry装饰的组件才可以调用页面的生命周期
  19.   onBackPress() {
  20.     console.info('Index onBackPress');
  21.   }
  22.  
  23.   // 组件生命周期
  24.   aboutToAppear() {
  25.     console.info('MyComponent aboutToAppear');
  26.   }
  27.  
  28.   // 组件生命周期
  29.   aboutToDisappear() {
  30.     console.info('MyComponent aboutToDisappear');
  31.   }
  32.  
  33.   build() {
  34.     Column() {
  35.       // this.showChild为true，创建Child子组件，执行Child aboutToAppear
  36.       if (this.showChild) {
  37.         Child()
  38.       }
  39.       // this.showChild为false，删除Child子组件，执行Child aboutToDisappear
  40.       Button('create or delete Child').onClick(() => {
  41.         this.showChild = false;
  42.       })
  43.       // push到Page2页面，执行onPageHide
  44.       Button('push to next page')
  45.         .onClick(() => {
  46.           router.pushUrl({ url: 'pages/Page2' });
  47.         })
  48.     }
  49.  
  50.   }
  51. }
  52.  
  53. @Component
  54. struct Child {
  55.   @State title: string = 'Hello World';
  56.   // 组件生命周期
  57.   aboutToDisappear() {
  58.     console.info('[lifeCycle] Child aboutToDisappear')
  59.   }
  60.   // 组件生命周期
  61.   aboutToAppear() {
  62.     console.info('[lifeCycle] Child aboutToAppear')
  63.   }
  64.  
  65.   build() {
  66.     Text(this.title).fontSize(50).onClick(() => {
  67.       this.title = 'Hello ArkUI';
  68.     })
  69.   }
  70. }

6.装饰函数

6.1 @Builder装饰器

@Builder主要是定义页面UI

6.1.1 装饰指向

1、自定义组件内自定义构建函数

  1. @Builder MyBuilderFunction(){ ... }
  2. #使用
  3. this.MyBuilderFunction(){ ... }

2、MyGlobalBuilderFunction()

  1. @Builder function MyGlobalBuilderFunction(){ ... }
  2. #使用
  3. MyGlobalBuilderFunction()
6.1.2 参数传递

1、按引用传递参数

  1. @Builder function ABuilder($$: { paramA1: string }) {
  2.   Row() {
  3.     Text(`UseStateVarByReference: ${$$.paramA1} `)
  4.   }
  5. }
  6. @Entry
  7. @Component
  8. struct Parent {
  9.   @State label: string = 'Hello';
  10.   build() {
  11.     Column() {
  12.       // 在Parent组件中调用ABuilder的时候，将this.label引用传递给ABuilder
  13.       ABuilder({ paramA1: this.label })
  14.       Button('Click me').onClick(() => {
  15.         // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
  16.         this.label = 'ArkUI';
  17.       })
  18.     }
  19.   }
  20. }

2、按值传递参数

  1. @Builder function ABuilder(paramA1: string) {
  2.   Row() {
  3.     Text(`UseStateVarByValue: ${paramA1} `)
  4.   }
  5. }
  6. @Entry
  7. @Component
  8. struct Parent {
  9.   label: string = 'Hello';
  10.   build() {
  11.     Column() {
  12.       ABuilder(this.label)
  13.     }
  14.   }
  15. }

6.2 @BuilderParam装饰器

@BuilderParam用来装饰指向@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。

6.2.1 装饰指向

1、本地初始化@BuilderParam

  1. @Builder function GlobalBuilder0() {}
  2.  
  3. @Component
  4. struct Child {
  5.   @Builder doNothingBuilder() {};
  6.  
  7.   @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  8.   @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  9.   build(){}
  10. }

2、初始化子组件@BuilderParam

  1. @Component
  2. struct Child {
  3.   @BuilderParam aBuilder0: () => void;
  4.  
  5.   build() {
  6.     Column() {
  7.       this.aBuilder0()
  8.     }
  9.   }
  10. }
  11.  
  12. @Entry
  13. @Component
  14. struct Parent {
  15.   @Builder componentBuilder() {
  16.     Text(`Parent builder `)
  17.   }
  18.  
  19.   build() {
  20.     Column() {
  21.       Child({ aBuilder0: this.componentBuilder })
  22.     }
  23.   }
  24. }

this都是器其本身，不会存在传递。

6.2.2 使用场景

1、参数化传递

  1. @Builder function GlobalBuilder1($$ : {label: string }) {
  2.   Text($$.label)
  3.     .width(400)
  4.     .height(50)
  5.     .backgroundColor(Color.Blue)
  6. }
  7.  
  8. @Component
  9. struct Child {
  10.   label: string = 'Child'
  11.   // 无参数类，指向的componentBuilder也是无参数类型
  12.   @BuilderParam aBuilder0: () => void;
  13.   // 有参数类型，指向的GlobalBuilder1也是有参数类型的方法
  14.   @BuilderParam aBuilder1: ($$ : { label : string}) => void;
  15.  
  16.   build() {
  17.     Column() {
  18.       this.aBuilder0()
  19.       this.aBuilder1({label: 'global Builder label' } )
  20.     }
  21.   }
  22. }
  23.  
  24. @Entry
  25. @Component
  26. struct Parent {
  27.   label: string = 'Parent'
  28.  
  29.   @Builder componentBuilder() {
  30.     Text(`${this.label}`)
  31.   }
  32.  
  33.   build() {
  34.     Column() {
  35.       this.componentBuilder()
  36.       Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })
  37.     }
  38.   }
  39. }

2、尾随闭包

  1. // xxx.ets
  2. @Component
  3. struct CustomContainer {
  4.   @Prop header: string;
  5.   @BuilderParam closer: () => void
  6.  
  7.   build() {
  8.     Column() {
  9.       Text(this.header)
  10.         .fontSize(30)
  11.       this.closer()
  12.     }
  13.   }
  14. }
  15.  
  16. @Builder function specificParam(label1: string, label2: string) {
  17.   Column() {
  18.     Text(label1)
  19.       .fontSize(30)
  20.     Text(label2)
  21.       .fontSize(30)
  22.   }
  23. }
  24.  
  25. @Entry
  26. @Component
  27. struct CustomContainerUser {
  28.   @State text: string = 'header';
  29.  
  30.   build() {
  31.     Column() {
  32.       // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
  33.       // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
  34.       CustomContainer({ header: this.text }) {
  35.         Column() {
  36.           specificParam('testA', 'testB')
  37.         }.backgroundColor(Color.Yellow)
  38.         .onClick(() => {
  39.           this.text = 'changeHeader';
  40.         })
  41.       }
  42.     }
  43.   }
  44. }

6.3 @Styles装饰器

@Styles装饰器主要是定义公共样式

6.3.1 装饰指向

1、全局

  1. // 全局
  2. @Styles function functionName() { ... }
  3.  
  4. // 在组件内
  5. @Component
  6. struct FancyUse {
  7.   @Styles fancy() {
  8.     .height(100)
  9.   }
  10. }

2、组件内

  1. @Component
  2. struct FancyUse {
  3.   @State heightValue: number = 100
  4.   @Styles fancy() {
  5.     .height(this.heightValue)
  6.     .backgroundColor(Color.Yellow)
  7.     .onClick(() => {
  8.       this.heightValue = 200
  9.     })
  10.   }
  11. }
6.3.2 使用场景
  1. // 定义在全局的@Styles封装的样式
  2. @Styles function globalFancy  () {
  3.   .width(150)
  4.   .height(100)
  5.   .backgroundColor(Color.Pink)
  6. }
  7.  
  8. @Entry
  9. @Component
  10. struct FancyUse {
  11.   @State heightValue: number = 100
  12.   // 定义在组件内的@Styles封装的样式
  13.   @Styles fancy() {
  14.     .width(200)
  15.     .height(this.heightValue)
  16.     .backgroundColor(Color.Yellow)
  17.     .onClick(() => {
  18.       this.heightValue = 200
  19.     })
  20.   }
  21.  
  22.   build() {
  23.     Column({ space: 10 }) {
  24.       // 使用全局的@Styles封装的样式
  25.       Text('FancyA')
  26.         .globalFancy ()
  27.         .fontSize(30)
  28.       // 使用组件内的@Styles封装的样式
  29.       Text('FancyB')
  30.         .fancy()
  31.         .fontSize(30)
  32.     }
  33.   }
  34. }

6.4 @Extend装饰器

@Extend用于扩展原生组件样式，作用和@Styles差不多。

6.4.1 装饰指向

@Extend仅支持定义在全局，不支持在组件内部定义

1、@Extend支持封装指定的组件的私有属性和私有事件

  1. // @Extend(Text)可以支持Text的私有属性fontColor
  2. @Extend(Text) function fancy () {
  3.   .fontColor(Color.Red)
  4. }
  5. // superFancyText可以调用预定义的fancy
  6. @Extend(Text) function superFancyText(size:number) {
  7.     .fontSize(size)
  8.     .fancy()
  9. }

2、@Extend装饰的方法支持参数

  1. // xxx.ets
  2. @Extend(Text) function fancy (fontSize: number) {
  3.   .fontColor(Color.Red)
  4.   .fontSize(fontSize)
  5. }
  6.  
  7. @Entry
  8. @Component
  9. struct FancyUse {
  10.   build() {
  11.     Row({ space: 10 }) {
  12.       Text('Fancy')
  13.         .fancy(16)
  14.       Text('Fancy')
  15.         .fancy(24)
  16.     }
  17.   }
  18. }

3、@Extend装饰的方法的参数可以为function

  1. @Extend(Text) function makeMeClick(onClick: () => void) {
  2.   .backgroundColor(Color.Blue)
  3.   .onClick(onClick)
  4. }
  5.  
  6. @Entry
  7. @Component
  8. struct FancyUse {
  9.   @State label: string = 'Hello World';
  10.  
  11.   onClickHandler() {
  12.     this.label = 'Hello ArkUI';
  13.   }
  14.  
  15.   build() {
  16.     Row({ space: 10 }) {
  17.       Text(`${this.label}`)
  18.         .makeMeClick(this.onClickHandler.bind(this))
  19.     }
  20.   }
  21. }

4、@Extend的参数可以为状态变量

  1. @Extend(Text) function fancy (fontSize: number) {
  2.   .fontColor(Color.Red)
  3.   .fontSize(fontSize)
  4. }
  5.  
  6. @Entry
  7. @Component
  8. struct FancyUse {
  9.   @State fontSizeValue: number = 20
  10.   build() {
  11.     Row({ space: 10 }) {
  12.       Text('Fancy')
  13.         .fancy(this.fontSizeValue)
  14.         .onClick(() => {
  15.           this.fontSizeValue = 30
  16.         })
  17.     }
  18.   }
  19. }
☀️6.4.2 使用场景
  1. @Extend(Text) function fancyText(weightValue: number, color: Color) {
  2.   .fontStyle(FontStyle.Italic)
  3.   .fontWeight(weightValue)
  4.   .backgroundColor(color)
  5. }
  6.  
  7. @Entry
  8. @Component
  9. struct FancyUse {
  10.   @State label: string = 'Hello World'
  11.  
  12.   build() {
  13.     Row({ space: 10 }) {
  14.       Text(`${this.label}`)
  15.         .fancyText(100, Color.Blue)
  16.       Text(`${this.label}`)
  17.         .fancyText(200, Color.Pink)
  18.       Text(`${this.label}`)
  19.         .fancyText(300, Color.Orange)
  20.     }.margin('20%')
  21.   }
  22. }

7.多态样式

stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供以下四种状态：

  • focused：获焦态
  • normal：正常态
  • pressed：按压态
  • disabled：不可用态

7.1 基本使用

  1. @Entry
  2. @Component
  3. struct CompWithInlineStateStyles {
  4.   @State focusedColor: Color = Color.Red;
  5.   normalColor: Color = Color.Green
  6.   build() {
  7.     Column() {
  8.       Button('clickMe').height(100).width(100)
  9.         .stateStyles({
  10.           normal: {
  11.             .backgroundColor(this.normalColor)
  12.           },
  13.           focused: {
  14.             .backgroundColor(this.focusedColor)
  15.           }
  16.         })
  17.         .onClick(() => {
  18.           this.focusedColor = Color.Pink
  19.         })
  20.         .margin('30%')
  21.     }
  22.   }
  23. }

7.2 @Styles和stateStyles联合使用

  1. @Entry
  2. @Component
  3. struct MyComponent {
  4.   @Styles normalStyle() {
  5.     .backgroundColor(Color.Gray)
  6.   }
  7.  
  8.   @Styles pressedStyle() {
  9.     .backgroundColor(Color.Red)
  10.   }
  11.  
  12.   build() {
  13.     Column() {
  14.       Text('Text1')
  15.         .fontSize(50)
  16.         .fontColor(Color.White)
  17.         .stateStyles({
  18.           normal: this.normalStyle,
  19.           pressed: this.pressedStyle,
  20.         })
  21.     }
  22.   }
  23. }

7.3 stateStyles里使用常规变量和状态变量

  1. @Entry
  2. @Component
  3. struct CompWithInlineStateStyles {
  4.   @State focusedColor: Color = Color.Red;
  5.   normalColor: Color = Color.Green
  7.   build() {
  8.     Button('clickMe').height(100).width(100)
  9.       .stateStyles({
  10.         normal: {
  11.           .backgroundColor(this.normalColor)
  12.         },
  13.         focused: {
  14.           .backgroundColor(this.focusedColor)
  15.         }
  16.       })
  17.       .onClick(() => {
  18.         this.focusedColor = Color.Pink
  19.       })
  20.       .margin('30%')
  21.   }
  22. }

 ?写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing?，不定期分享原创知识。
  • 想要获取文中提到的学习资料，请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

注：本文转载自blog.csdn.net的蜀道山QAQ的文章"https://blog.csdn.net/shudaoshanQAQ/article/details/135394734"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！