ArkTS以聲明方式組合和擴(kuò)展組件來描述應(yīng)用程序的UI，同時(shí)還提供了基本的屬性、事件和子組件配置方法，幫助開發(fā)者實(shí)現(xiàn)應(yīng)用交互邏輯。

創(chuàng)建組件

根據(jù)組件構(gòu)造方法的不同，創(chuàng)建組件包含有參數(shù)和無參數(shù)兩種方式。

說明

創(chuàng)建組件時(shí)不需要new運(yùn)算符。

無參數(shù)

如果組件的接口定義沒有包含必選構(gòu)造參數(shù)，則組件后面的“()”不需要配置任何內(nèi)容。例如，Divider組件不包含構(gòu)造參數(shù)：

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

有參數(shù)

如果組件的接口定義包含構(gòu)造參數(shù)，則在組件后面的“()”配置相應(yīng)參數(shù)。

• Image組件的必選參數(shù)src。

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

• Text組件的非必選參數(shù)content。

  // string類型的參數(shù)
  Text('test')
  // $r形式引入應(yīng)用資源，可應(yīng)用于多語(yǔ)言場(chǎng)景
  Text($r('app.string.title_value'))
  // 無參數(shù)形式
  Text()

• 變量或表達(dá)式也可以用于參數(shù)賦值，其中表達(dá)式返回的結(jié)果類型必須滿足參數(shù)類型要求。例如，設(shè)置變量或表達(dá)式來構(gòu)造Image和Text組件的參數(shù)。

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

配置屬性

屬性方法以“.”鏈?zhǔn)秸{(diào)用的方式配置系統(tǒng)組件的樣式和其他屬性，建議每個(gè)屬性方法單獨(dú)寫一行。

• 配置Text組件的字體大小。

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

• 配置組件的多個(gè)屬性。

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

• 除了直接傳遞常量參數(shù)外，還可以傳遞變量或表達(dá)式。

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

• 對(duì)于系統(tǒng)組件，ArkUI還為其屬性預(yù)定義了一些枚舉類型供開發(fā)者調(diào)用，枚舉類型可以作為參數(shù)傳遞，但必須滿足參數(shù)類型要求。

  例如，可以按以下方式配置Text組件的顏色和字體樣式。

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

配置事件

事件方法以“.”鏈?zhǔn)秸{(diào)用的方式配置系統(tǒng)組件支持的事件，建議每個(gè)事件方法單獨(dú)寫一行。

• 使用箭頭函數(shù)配置組件的事件方法。

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

• 使用匿名函數(shù)表達(dá)式配置組件的事件方法，要求使用bind，以確保函數(shù)體中的this指向當(dāng)前組件。

  1. Button('add counter').onClick(function(){this.counter += 2;}.bind(this))

• 使用組件的成員函數(shù)配置組件的事件方法。

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

• 使用聲明的箭頭函數(shù)，可以直接調(diào)用，不需要bind this。

  1. fn = () => {console.info(`counter: ${this.counter}`)this.counter++
     }
     ...
     Button('add counter').onClick(this.fn)

配置子組件

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

• 以下是簡(jiǎn)單的Column組件配置子組件的示例。

  1. Column() {Text('Hello').fontSize(100)Divider()Text(this.myText).fontSize(100).fontColor(Color.Red)
     }

• 容器組件均支持子組件配置，可以實(shí)現(xiàn)相對(duì)復(fù)雜的多級(jí)嵌套。

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