聲明式UI描述

2024-01-25 12:00 更新

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

創(chuàng)建組件

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

說(shuō)明

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

無(wú)參數(shù)

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

  1. Column() {
  2. Text('item 1')
  3. Divider()
  4. Text('item 2')
  5. }

有參數(shù)

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

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

    1. Image('https://xyz/test.jpg')
  • Text組件的非必選參數(shù)content。

    1. // string類型的參數(shù)
    2. Text('test')
    3. // $r形式引入應(yīng)用資源,可應(yīng)用于多語(yǔ)言場(chǎng)景
    4. Text($r('app.string.title_value'))
    5. // 無(wú)參數(shù)形式
    6. Text()
  • 變量或表達(dá)式也可以用于參數(shù)賦值,其中表達(dá)式返回的結(jié)果類型必須滿足參數(shù)類型要求。
    例如,設(shè)置變量或表達(dá)式來(lái)構(gòu)造Image和Text組件的參數(shù)。
    1. Image(this.imagePath)
    2. Image('https://' + this.imageUrl)
    3. Text(`count: ${this.count}`)

配置屬性

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

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

    1. Text('test')
    2. .fontSize(12)
  • 配置組件的多個(gè)屬性。

    1. Image('test.jpg')
    2. .alt('error.jpg')
    3. .width(100)
    4. .height(100)
  • 除了直接傳遞常量參數(shù)外,還可以傳遞變量或表達(dá)式。

    1. Text('hello')
    2. .fontSize(this.size)
    3. Image('test.jpg')
    4. .width(this.count % 2 === 0 ? 100 : 200)
    5. .height(this.offset + 100)
  • 對(duì)于系統(tǒng)組件,ArkUI還為其屬性預(yù)定義了一些枚舉類型供開發(fā)者調(diào)用,枚舉類型可以作為參數(shù)傳遞,但必須滿足參數(shù)類型要求。

    例如,可以按以下方式配置Text組件的顏色和字體樣式。
    1. Text('hello')
    2. .fontSize(20)
    3. .fontColor(Color.Red)
    4. .fontWeight(FontWeight.Bold)

配置事件

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

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

    1. Button('Click me')
    2. .onClick(() => {
    3. this.myText = 'ArkUI';
    4. })
  • 使用匿名函數(shù)表達(dá)式配置組件的事件方法,要求使用bind,以確保函數(shù)體中的this指向當(dāng)前組件。

    1. Button('add counter')
    2. .onClick(function(){
    3. this.counter += 2;
    4. }.bind(this))
  • 使用組件的成員函數(shù)配置組件的事件方法。

    1. myClickHandler(): void {
    2. this.counter += 2;
    3. }
    4. ...
    5. Button('add counter')
    6. .onClick(this.myClickHandler.bind(this))
  • 使用聲明的箭頭函數(shù),可以直接調(diào)用,不需要bind this。
    1. fn = () => {
    2. console.info(`counter: ${this.counter}`)
    3. this.counter++
    4. }
    5. ...
    6. Button('add counter')
    7. .onClick(this.fn)

配置子組件

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

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

    1. Column() {
    2. Text('Hello')
    3. .fontSize(100)
    4. Divider()
    5. Text(this.myText)
    6. .fontSize(100)
    7. .fontColor(Color.Red)
    8. }
  • 容器組件均支持子組件配置,可以實(shí)現(xiàn)相對(duì)復(fù)雜的多級(jí)嵌套。

    1. Column() {
    2. Row() {
    3. Image('test1.jpg')
    4. .width(100)
    5. .height(100)
    6. Button('click +1')
    7. .onClick(() => {
    8. console.info('+1 clicked!');
    9. })
    10. }
    11. }
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)