鸿蒙 ArkTs 基礎

ArkTS 是一種為構建高性能應用而設計的編程語言。ArkTS 在繼承 TypeScript 語法的基礎上進行了優化，以提供更高的性能和開發效率。

基礎語法概述#

裝飾器：用於裝飾類、結構、方法以及變量，並賦予其特殊的含義。如上述示例中 @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/@Styles：擴展內置組件和封裝屬性樣式，更靈活地組合內置組件。
stateStyles：多態樣式，可以依據組件的內部狀態的不同，設置不同樣式。

聲明式 UI 描述#

ArkTS 以聲明方式組合和擴展組件來描述應用程序的 UI，同時還提供了基本的屬性、事件和子組件配置方法，幫助開發者實現應用交互邏輯。

創建組件#

根據組件構造方法的不同，創建組件包含有參數和無參數兩種方式。

無參數#

如果組件的接口定義沒有包含必選構造參數，則組件後面的 “()” 不需要配置任何內容。例如，Divider 組件不包含構造參數。

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

有參數#

如果組件的接口定義包含構造參數，則在組件後面的 “()” 需要配置相應參數。

// string類型的參數
Text("test");
// $r形式引入應用資源，可應用於多語言場景
Text($r("app.string.title_value"));
// 無參數形式
Text();

配置屬性#

屬性方法以 “.” 鏈式調用的方式配置系統組件的樣式和其他屬性，建議每個屬性方法單獨寫一行。

Text("test").fontSize(12);

配置組件的多個屬性。

Image("test.jpg").alt("error.jpg").width(100).height(100);

除了直接傳遞常量參數外，還可以傳遞變量或表達式。

Text("hello").fontSize(this.size);
Image("test.jpg")
  .width(this.count % 2 === 0 ? 100 : 200)
  .height(this.offset + 100);

配置事件#

事件方法以 “.” 鏈式調用的方式配置系統組件支持的事件，建議每個事件方法單獨寫一行。

使用箭頭函數表達式配置組件的事件方法，要求使用 “() => {...}”，以確保函數與組件綁定，同時符合 ArkTS 語法規範。

Button("add counter").onClick(() => {
  this.counter += 2;
});

使用組件的成員函數配置組件的事件方法，需要 bind this。ArkTS 語法不推薦使用成員函數配合 bind this 去配置組件的事件方法。

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

使用聲明的箭頭函數，可以直接調用，不需要 bind this。
箭頭函數內部的 this 是詞法作用域，由上下文確定。匿名函數可能會有 this 指向不明確問題，在 ArkTS 中不允許使用。

配置子組件#

如果組件支持子組件配置，則需在尾隨閉包 "{...}" 中為組件添加子組件的 UI 描述。Column、Row、Stack、Grid、List 等組件都是容器組件。

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}

此文由 Mix Space 同步更新至 xLog
原始鏈接為 http://www.sroxck.top/posts/harmony/arkts-base