??一、ArkTS語(yǔ)言基本語(yǔ)法

??1.簡(jiǎn)介

HarmonyOS的ArkTS語(yǔ)言是一種基于TypeScript開(kāi)發(fā)的語(yǔ)言，它專(zhuān)為HarmonyOS系統(tǒng)開(kāi)發(fā)而設(shè)計(jì)。ArkTS語(yǔ)言結(jié)合了JavaScript的靈活性和TypeScript的嚴(yán)謹(jǐn)性，使得開(kāi)發(fā)者能夠快速、高效地開(kāi)發(fā)出高質(zhì)量的HarmonyOS應(yīng)用程序。

ArkTS語(yǔ)言具有以下特點(diǎn)：

靜態(tài)類(lèi)型檢查：開(kāi)發(fā)者在編寫(xiě)代碼時(shí)可以使用類(lèi)型注解來(lái)進(jìn)行類(lèi)型檢查，從而減少因類(lèi)型錯(cuò)誤而導(dǎo)致的bug。

異步/同步編程：ArkTS語(yǔ)言支持基于Promise和async/await的異步/同步編程方式，能夠更好地處理異步操作。

內(nèi)置模塊：ArkTS語(yǔ)言?xún)?nèi)置了許多常用的模塊，如文件系統(tǒng)、網(wǎng)絡(luò)請(qǐng)求、圖形渲染等，使得開(kāi)發(fā)者不必自己編寫(xiě)這些模塊。

兼容性：ArkTS語(yǔ)言使用TypeScript語(yǔ)法，可以與JavaScript代碼無(wú)縫集成，并且可以編譯成JavaScript代碼來(lái)在其他平臺(tái)上運(yùn)行。

ArkTS語(yǔ)言基礎(chǔ)類(lèi)庫(kù)是HarmonyOS系統(tǒng)上為應(yīng)用開(kāi)發(fā)者提供的常用基礎(chǔ)能力，主要包含能力如下圖所示：

ArkTS是HarmonyOS優(yōu)選的主力應(yīng)用開(kāi)發(fā)語(yǔ)言。ArkTS圍繞應(yīng)用開(kāi)發(fā)在TypeScript（簡(jiǎn)稱(chēng)TS）生態(tài)基礎(chǔ)上做了進(jìn)一步擴(kuò)展，繼承了TS的所有特性，是TS的超集。

ArkTS和HTML的差別：

??2.TypeScript的基礎(chǔ)語(yǔ)法

TypeScript是一種由微軟開(kāi)發(fā)的JavaScript超集語(yǔ)言，它支持JavaScript的所有語(yǔ)法，但添加了一些新的特性和語(yǔ)法，使開(kāi)發(fā)更加可靠和高效。TypeScript最大的特點(diǎn)是引入了靜態(tài)類(lèi)型，開(kāi)發(fā)者可以在編譯時(shí)發(fā)現(xiàn)類(lèi)型錯(cuò)誤，提高代碼的可維護(hù)性和可讀性。

TypeScript代碼可以在編譯時(shí)被轉(zhuǎn)換成JavaScript代碼，在瀏覽器和Node.js環(huán)境下都可以運(yùn)行。雖然TypeScript相對(duì)于JavaScript來(lái)說(shuō)更加復(fù)雜，但是它可以幫助開(kāi)發(fā)者更好地組織和管理復(fù)雜的項(xiàng)目，特別是在團(tuán)隊(duì)協(xié)作中提高代碼的質(zhì)量和可維護(hù)性。

TypeScript基礎(chǔ)知識(shí)包括基本類(lèi)型、變量聲明、函數(shù)、類(lèi)、接口、泛型等。另外，TypeScript還支持模塊化開(kāi)發(fā)，可以使用ES模塊規(guī)范或者CommonJS規(guī)范導(dǎo)入和導(dǎo)出模塊。在實(shí)際項(xiàng)目開(kāi)發(fā)中，TypeScript還可以結(jié)合工具鏈如Webpack、Babel進(jìn)行編譯、打包等操作。

除了上面提到的變量聲明、函數(shù)定義、類(lèi)定義、接口定義和枚舉類(lèi)型外，TypeScript還有一些基礎(chǔ)語(yǔ)法需要掌握：

??2.1 類(lèi)型注解
TypeScript的靜態(tài)類(lèi)型檢查是通過(guò)類(lèi)型注解實(shí)現(xiàn)的。在聲明變量或函數(shù)時(shí)，可以使用冒號(hào)加上類(lèi)型注解，指定變量或函數(shù)的類(lèi)型。例如：

let name: string = "TypeScript";

function add(a: number, b: number): number {
    return a + b;
}

??2.2 接口
TypeScript的接口是用來(lái)描述對(duì)象的形狀的。可以定義對(duì)象需要包含哪些屬性和方法，以及它們的類(lèi)型。例如：

interface Person {
    name: string;
    age: number;
    sayHello(): void;
}

let tom: Person = {
    name: "Tom",
    age: 18,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}!`);
    }
};

??2.3 泛型
TypeScript的泛型可以幫助我們編寫(xiě)更加靈活、可重用的代碼。它允許在編寫(xiě)函數(shù)、類(lèi)或接口時(shí)使用參數(shù)化類(lèi)型，從而提高代碼的通用性和可讀性。例如：

function identity<T>(arg: T): T {

<details>
<summary>點(diǎn)擊查看代碼</summary>

function identity(arg: T): T {
return arg;
}

let output = identity("TypeScript");
console.log(output); // 輸出 TypeScript

</details>

    return arg;
}

let output = identity<string>("TypeScript");
console.log(output); // 輸出 TypeScript

??2.4 類(lèi)的繼承
TypeScript的類(lèi)可以繼承其他類(lèi)，從而實(shí)現(xiàn)代碼的重用和擴(kuò)展。通過(guò)關(guān)鍵字extends可以讓一個(gè)類(lèi)繼承另一個(gè)類(lèi)，并繼承其屬性和方法。例如：

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log("Woof! Woof!");
    }
}

let dog = new Dog("Bobby");
dog.move(10); // 輸出 "Bobby moved 10m."
dog.bark(); // 輸出 "Woof! Woof!"

??2.5 類(lèi)的訪問(wèn)修飾符
TypeScript的類(lèi)可以通過(guò)訪問(wèn)修飾符來(lái)控制類(lèi)的屬性和方法的訪問(wèn)權(quán)限。有三個(gè)訪問(wèn)修飾符可以使用：public、private和protected。默認(rèn)情況下，都是public。

public：公共的，任何外部或內(nèi)部都可以訪問(wèn)。

private：私有的，只有類(lèi)的內(nèi)部可以訪問(wèn)，外部無(wú)法訪問(wèn)。

protected：受保護(hù)的，只有類(lèi)的內(nèi)部和其子類(lèi)可以訪問(wèn)，外部無(wú)法訪問(wèn)。

class Person {
    protected name: string;
    constructor(name: string) {
        this.name = name;
    }
    protected sayHello() {
        console.log(`Hello, I'm ${this.name}.`);
    }
}

class Student extends Person {
    constructor(name: string) {
        super(name);
    }
    public sayHelloToTeacher(teacher: Person) {
        console.log(`Hello, ${teacher.name}, I'm ${this.name}.`);
    }
}

let tom = new Student("Tom");
let bob = new Person("Bob");
tom.sayHelloToTeacher(bob); // 輸出 "Hello, Bob, I'm Tom."
bob.sayHello(); // 報(bào)錯(cuò)：屬性 'sayHello' 受保護(hù)，只能在類(lèi) 'Person' 及其子類(lèi)中訪問(wèn)。

以上只是舉例一些TS的基礎(chǔ)語(yǔ)法，TS內(nèi)容遠(yuǎn)不止這些不懂的可以去學(xué)學(xué)TS。

??3.ArkTS的基本組成

裝飾器：用于裝飾類(lèi)、結(jié)構(gòu)、方法以及變量，并賦予其特殊的含義。如上述示例中@Entry、@Component和@State都是裝飾器，@Component表示自定義組件，@Entry表示該自定義組件為入口組件，@State表示組件中的狀態(tài)變量，狀態(tài)變量變化會(huì)觸發(fā)UI刷新。

UI描述：以聲明式的方式來(lái)描述UI的結(jié)構(gòu)，例如build()方法中的代碼塊。

自定義組件：可復(fù)用的UI單元，可組合其他組件，如上述被@Component裝飾的struct Hello。

系統(tǒng)組件：ArkUI框架中默認(rèn)內(nèi)置的基礎(chǔ)和容器組件，可直接被開(kāi)發(fā)者調(diào)用，比如示例中的Column、Text、Divider、Button。

屬性方法：組件可以通過(guò)鏈?zhǔn)秸{(diào)用配置多項(xiàng)屬性，如fontSize()、width()、height()、backgroundColor()等。

事件方法：組件可以通過(guò)鏈?zhǔn)秸{(diào)用設(shè)置多個(gè)事件的響應(yīng)邏輯，如跟隨在Button后面的onClick()。
系統(tǒng)組件、屬性方法、事件方法具體使用可參考基于ArkTS的聲明式開(kāi)發(fā)范式。

除此之外，ArkTS擴(kuò)展了多種語(yǔ)法范式來(lái)使開(kāi)發(fā)更加便捷：

@Builder/@BuilderParam：特殊的封裝UI描述的方法，細(xì)粒度的封裝和復(fù)用UI描述。
@Extend/@Style：擴(kuò)展內(nèi)置組件和封裝屬性樣式，更靈活地組合內(nèi)置組件。
stateStyles：多態(tài)樣式，可以依據(jù)組件的內(nèi)部狀態(tài)的不同，設(shè)置不同樣式。

??4.自定義組件

@Component
struct HelloComponent {
  @State message: string = 'Hello, World!';

  build() {
    // HelloComponent自定義組件組合系統(tǒng)組件Row和Text
    Row() {
      Text(this.message)
        .onClick(() => {
          // 狀態(tài)變量message的改變驅(qū)動(dòng)UI刷新，UI從'Hello, World!'刷新為'Hello, ArkUI!'
          this.message = 'Hello, ArkUI!';
        })
    }
  }
}

@Entry
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI message')
      HelloComponent({ message: 'Hello, World!' });
      Divider()
      HelloComponent({ message: '你好!' });
    }
  }
}

struct：自定義組件基于struct實(shí)現(xiàn)，struct + 自定義組件名 +
{…}的組合構(gòu)成自定義組件，不能有繼承關(guān)系。對(duì)于struct的實(shí)例化，可以省略new。

build()函數(shù)：build()函數(shù)用于定義自定義組件的聲明式UI描述，自定義組件必須定義build()函數(shù)。

@Entry：@Entry裝飾的自定義組件將作為UI頁(yè)面的入口。在單個(gè)UI頁(yè)面中，最多可以使用@Entry裝飾一個(gè)自定義組件。@Entry可以接受一個(gè)可選的LocalStorage的參數(shù)。

??4.1 build()函數(shù)規(guī)范
1、根節(jié)點(diǎn)唯一

@Entry
@Component
struct MyComponent {
  build() {
    // 根節(jié)點(diǎn)唯一且必要，必須為容器組件
    Row() {
      ChildComponent() 
    }
  }
}

@Component
struct ChildComponent {
  build() {
    // 根節(jié)點(diǎn)唯一且必要，可為非容器組件
    Image('test.jpg')
  }
}

2、不允許聲明本地變量、打印、作用域

build() {
  // 反例：不允許聲明本地變量
  let a: number = 1;
  // 反例：不允許console.info
  console.info('print debug log');
  // 反例：不允許本地作用域
  {
    ...
  }
}

3、不允許調(diào)用沒(méi)有用@Builder裝飾的方法，允許系統(tǒng)組件的參數(shù)是TS方法的返回值。

@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例：不能調(diào)用沒(méi)有用@Builder裝飾的方法
      this.doSomeCalculations();
      // 正例：可以調(diào)用
      this.doSomeRender();
      // 正例：參數(shù)可以為調(diào)用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}

4、不允許switch和表達(dá)式

build() {
  Column() {
    // 反例：不允許使用switch語(yǔ)法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
    // 反例：不允許使用表達(dá)式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

??5.頁(yè)面和自定義組件生命周期

頁(yè)面生命周期，即被@Entry裝飾的組件生命周期，提供以下生命周期接口：

• onPageShow：頁(yè)面每次顯示時(shí)觸發(fā)。
• onPageHide：頁(yè)面每次隱藏時(shí)觸發(fā)一次。
• onBackPress：當(dāng)用戶(hù)點(diǎn)擊返回按鈕時(shí)觸發(fā)。

組件生命周期，即一般用@Component裝飾的自定義組件的生命周期，提供以下生命周期接口：

• aboutToAppear：組件即將出現(xiàn)時(shí)回調(diào)該接口，具體時(shí)機(jī)為在創(chuàng)建自定義組件的新實(shí)例后，在執(zhí)行其build()函數(shù)之前執(zhí)行。
• aboutToDisappear：在自定義組件即將析構(gòu)銷(xiāo)毀時(shí)執(zhí)行。

// Index.ets
import router from '@ohos.router';

@Entry
@Component
struct MyComponent {
  @State showChild: boolean = true;

  // 只有被@Entry裝飾的組件才可以調(diào)用頁(yè)面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry裝飾的組件才可以調(diào)用頁(yè)面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }

  // 只有被@Entry裝飾的組件才可以調(diào)用頁(yè)面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }

  // 組件生命周期
  aboutToAppear() {
    console.info('MyComponent aboutToAppear');
  }

  // 組件生命周期
  aboutToDisappear() {
    console.info('MyComponent aboutToDisappear');
  }

  build() {
    Column() {
      // this.showChild為true，創(chuàng)建Child子組件，執(zhí)行Child aboutToAppear
      if (this.showChild) {
        Child()
      }
      // this.showChild為false，刪除Child子組件，執(zhí)行Child aboutToDisappear
      Button('create or delete Child').onClick(() => {
        this.showChild = false;
      })
      // push到Page2頁(yè)面，執(zhí)行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';
    })
  }
}

??6.裝飾函數(shù)

??6.1 @Builder裝飾器

@Builder主要是定義頁(yè)面UI

??6.1.1 裝飾指向

1、自定義組件內(nèi)自定義構(gòu)建函數(shù)

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

2、MyGlobalBuilderFunction()

@Builder function MyGlobalBuilderFunction(){ ... }
#使用
MyGlobalBuilderFunction()

??6.1.2 參數(shù)傳遞

1、按引用傳遞參數(shù)

@Builder function ABuilder($$: { paramA1: string }) {
  Row() {
    Text(`UseStateVarByReference: ${$$.paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  @State label: string = 'Hello';
  build() {
    Column() {
      // 在Parent組件中調(diào)用ABuilder的時(shí)候，將this.label引用傳遞給ABuilder
      ABuilder({ paramA1: this.label })
      Button('Click me').onClick(() => {
        // 點(diǎn)擊“Click me”后，UI從“Hello”刷新為“ArkUI”
        this.label = 'ArkUI';
      })
    }
  }
}

2、按值傳遞參數(shù)

@Builder function ABuilder(paramA1: string) {
  Row() {
    Text(`UseStateVarByValue: ${paramA1} `)
  }
}
@Entry
@Component
struct Parent {
  label: string = 'Hello';
  build() {
    Column() {
      ABuilder(this.label)
    }
  }
}

??6.2 @BuilderParam裝飾器

@BuilderParam用來(lái)裝飾指向@Builder方法的變量，開(kāi)發(fā)者可在初始化自定義組件時(shí)對(duì)此屬性進(jìn)行賦值，為自定義組件增加特定的功能。

??6.2.1 裝飾指向

1、本地初始化@BuilderParam

@Builder function GlobalBuilder0() {}

@Component
struct Child {
  @Builder doNothingBuilder() {};

  @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  build(){}
}

2、初始化子組件@BuilderParam

@Component
struct Child {
  @BuilderParam aBuilder0: () => void;

  build() {
    Column() {
      this.aBuilder0()
    }
  }
}

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`Parent builder `)
  }

  build() {
    Column() {
      Child({ aBuilder0: this.componentBuilder })
    }
  }
}

this都是器其本身，不會(huì)存在傳遞。

??6.2.2 使用場(chǎng)景

1、參數(shù)化傳遞

@Builder function GlobalBuilder1($$ : {label: string }) {
  Text($$.label)
    .width(400)
    .height(50)
    .backgroundColor(Color.Blue)
}

@Component
struct Child {
  label: string = 'Child'
  // 無(wú)參數(shù)類(lèi)，指向的componentBuilder也是無(wú)參數(shù)類(lèi)型
  @BuilderParam aBuilder0: () => void;
  // 有參數(shù)類(lèi)型，指向的GlobalBuilder1也是有參數(shù)類(lèi)型的方法
  @BuilderParam aBuilder1: ($$ : { label : string}) => void;

  build() {
    Column() {
      this.aBuilder0()
      this.aBuilder1({label: 'global Builder label' } )
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = 'Parent'

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })
    }
  }
}

2、尾隨閉包

// xxx.ets
@Component
struct CustomContainer {
  @Prop header: string;
  @BuilderParam closer: () => void

  build() {
    Column() {
      Text(this.header)
        .fontSize(30)
      this.closer()
    }
  }
}

@Builder function specificParam(label1: string, label2: string) {
  Column() {
    Text(label1)
      .fontSize(30)
    Text(label2)
      .fontSize(30)
  }
}

@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';

  build() {
    Column() {
      // 創(chuàng)建CustomContainer，在創(chuàng)建CustomContainer時(shí)，通過(guò)其后緊跟一個(gè)大括號(hào)“{}”形成尾隨閉包
      // 作為傳遞給子組件CustomContainer @BuilderParam closer: () => void的參數(shù)
      CustomContainer({ header: this.text }) {
        Column() {
          specificParam('testA', 'testB')
        }.backgroundColor(Color.Yellow)
        .onClick(() => {
          this.text = 'changeHeader';
        })
      }
    }
  }
}

??6.3 @Styles裝飾器

@Styles裝飾器主要是定義公共樣式

??6.3.1 裝飾指向

1、全局

// 全局
@Styles function functionName() { ... }

// 在組件內(nèi)
@Component
struct FancyUse {
  @Styles fancy() {
    .height(100)
  }
}

2、組件內(nèi)

@Component
struct FancyUse {
  @State heightValue: number = 100
  @Styles fancy() {
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }
}

??6.3.2 使用場(chǎng)景

// 定義在全局的@Styles封裝的樣式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}

@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定義在組件內(nèi)的@Styles封裝的樣式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }

  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封裝的樣式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用組件內(nèi)的@Styles封裝的樣式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

??6.4 @Extend裝飾器
@Extend用于擴(kuò)展原生組件樣式，作用和@Styles差不多。

??6.4.1 裝飾指向
@Extend僅支持定義在全局，不支持在組件內(nèi)部定義

1、@Extend支持封裝指定的組件的私有屬性和私有事件

// @Extend(Text)可以支持Text的私有屬性fontColor
@Extend(Text) function fancy () {
  .fontColor(Color.Red)
}
// superFancyText可以調(diào)用預(yù)定義的fancy
@Extend(Text) function superFancyText(size:number) {
    .fontSize(size)
    .fancy()
}

2、@Extend裝飾的方法支持參數(shù)

// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(16)
      Text('Fancy')
        .fancy(24)
    }
  }
}

3、@Extend裝飾的方法的參數(shù)可以為function

@Extend(Text) function makeMeClick(onClick: () => void) {
  .backgroundColor(Color.Blue)
  .onClick(onClick)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World';

  onClickHandler() {
    this.label = 'Hello ArkUI';
  }

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .makeMeClick(this.onClickHandler.bind(this))
    }
  }
}

4、@Extend的參數(shù)可以為狀態(tài)變量

@Extend(Text) function fancy (fontSize: number) {
  .fontColor(Color.Red)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  @State fontSizeValue: number = 20
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(this.fontSizeValue)
        .onClick(() => {
          this.fontSizeValue = 30
        })
    }
  }
}

??6.4.2 使用場(chǎng)景

@Extend(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}

@Entry
@Component
struct FancyUse {
  @State label: string = 'Hello World'

  build() {
    Row({ space: 10 }) {
      Text(`${this.label}`)
        .fancyText(100, Color.Blue)
      Text(`${this.label}`)
        .fancyText(200, Color.Pink)
      Text(`${this.label}`)
        .fancyText(300, Color.Orange)
    }.margin('20%')
  }
}

??7.多態(tài)樣式

stateStyles是屬性方法，可以根據(jù)UI內(nèi)部狀態(tài)來(lái)設(shè)置樣式，類(lèi)似于css偽類(lèi)，但語(yǔ)法不同。ArkUI提供以下四種狀態(tài)：

• focused：獲焦態(tài)
• normal：正常態(tài)
• pressed：按壓態(tài)
• disabled：不可用態(tài)

??7.1 基本使用

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green
  build() {
    Column() {
      Button('clickMe').height(100).width(100)
        .stateStyles({
          normal: {
            .backgroundColor(this.normalColor)
          },
          focused: {
            .backgroundColor(this.focusedColor)
          }
        })
        .onClick(() => {
          this.focusedColor = Color.Pink
        })
        .margin('30%')
    }
  }
}

??7.2 @Styles和stateStyles聯(lián)合使用

@Entry
@Component
struct MyComponent {
  @Styles normalStyle() {
    .backgroundColor(Color.Gray)
  }

  @Styles pressedStyle() {
    .backgroundColor(Color.Red)
  }

  build() {
    Column() {
      Text('Text1')
        .fontSize(50)
        .fontColor(Color.White)
        .stateStyles({
          normal: this.normalStyle,
          pressed: this.pressedStyle,
        })
    }
  }
}

??7.3 stateStyles里使用常規(guī)變量和狀態(tài)變量

@Entry
@Component
struct CompWithInlineStateStyles {
  @State focusedColor: Color = Color.Red;
  normalColor: Color = Color.Green

  build() {
    Button('clickMe').height(100).width(100)
      .stateStyles({
        normal: {
          .backgroundColor(this.normalColor)
        },
        focused: {
          .backgroundColor(this.focusedColor)
        }
      })
      .onClick(() => {
        this.focusedColor = Color.Pink
      })
      .margin('30%')
  }
}

總結(jié)

以上是生活随笔為你收集整理的鸿蒙HarmonyOS实战-ArkTS语言（基本语法）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。