鴻蒙前端開發3-ArkTS語言基本語法

月下云生發表於2024-06-11
鴻蒙前端

官方文件：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-basic-syntax-0000001504650057-V2

1.基本語法

　　　　

  • 裝飾器

　　 　　用於裝飾類、結構、方法以及變數，並賦予其特殊的含義。如上述示例中@Entry、@Component和@State都是裝飾器，@Component表示自定義元件，@Entry表示該自定義元件為入口元件，@State表示元件中的狀態變數，狀態變數變化會觸發UI重新整理。

  • UI描述

　　　　以宣告式的方式來描述UI的結構，例如build()方法中的程式碼塊

  • 自定義元件

　　　　可複用的UI單元，可組合其他元件，如上述被@Component裝飾的struct Hello

　　　　a.自定義元件特點

　　　　　　1.可組合

　　　　　　2.可重用

　　　　　　3.資料驅動UI更新

　　　　b.基本用法，如果在另外的檔案中引用該自定義元件，需要使用export關鍵字匯出，並在使用的頁面import該自定義元件。　　

@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!';
        })
    }
  }
}

　　　c.基本結構　　

@Entry
@Component
struct MyComponent {
  build() {
  }
}

　　　　1.@Entry裝飾的自定義元件將作為UI頁面的入口，在單個UI頁面中，最多可以使用@Entry裝飾一個自定義元件。@Entry可以接受一個可選的LocalStorage的引數

　　　　2.struct：自定義元件基於struct實現，struct + 自定義元件名 + {...}的組合構成自定義元件，不能有繼承關係。對於struct的例項化，可以省略new

　　　　3.@Component：@Component裝飾器僅能裝飾struct關鍵字宣告的資料結構。struct被@Component裝飾後具備元件化的能力，需要實現build方法描述UI，一個struct只能被一個@Component裝飾

　　　　4.build()函式：build()函式用於定義自定義元件的宣告式UI描述，自定義元件必須定義build()函式

　　　　　　@Entry裝飾的自定義元件，其build()函式下的根節點唯一且必要，且必須為容器元件，其中ForEach禁止作為根節點

　　　　　　@Component裝飾的自定義元件，其build()函式下的根節點唯一且必要，可以為非容器元件，其中ForEach禁止作為根節點

　　　　　　不允許宣告本地變數

　　　　　　不允許在UI描述裡直接使用console.info，但允許在方法或者函式里使用

　　　　　　不允許建立本地的作用域

　　　　　　不允許呼叫沒有用@Builder裝飾的方法，允許系統元件的引數是TS方法的返回值

　　　　　　不允許switch語法，如果需要使用條件判斷，請使用if

　　　　　　不允許使用表示式

  • 系統元件

　　　　ArkUI框架中預設內建的基礎和容器元件，可直接被開發者呼叫，比如示例中的Column、Text、Divider、Button

  • 屬性方法

　　　　元件可以透過鏈式呼叫配置多項屬性，如fontSize()、width()、height()、backgroundColor()等

　　　　使用匿名函式表示式配置元件的事件方法，要求使用bind，以確保函式體中的this指向當前元件，使用宣告的箭頭函式，可以直接呼叫，不需要bind this

Button('add counter')
  .onClick(function(){
    this.counter += 2;
  }.bind(this))
  • 成員函式/變數
    • 自定義元件的成員函式/變數為私有的，且不建議成靜態函式/靜態變數
    • 自定義的成員變數本地初始化有些是可選的，有些是必選的，具體是否需要本地初始化，是否需要從父元件透過引數傳遞初始化子元件的成員變數
  • 擴充套件語法
    • @Builder/@BuilderParam：特殊的封裝UI描述的方法，細粒度的封裝和複用UI描述
    • @Extend/@Styles：擴充套件內建元件和封裝屬性樣式，更靈活地組合內建元件
    • stateStyles：多型樣式，可以依據元件的內部狀態的不同，設定不同樣式
  • 自定義元件通用樣式
@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}

　2.$r 形式引入應用資源，可應用於多語言場景

相關文章