一、引言

在鴻蒙Next開(kāi)發(fā)中，ArkTS以聲明方式組合和擴(kuò)展組件來(lái)描述應(yīng)用程序的UI，為開(kāi)發(fā)者提供了高效、靈活的方式來(lái)構(gòu)建用戶界面。本文將詳細(xì)介紹鴻蒙Next中聲明式UI的相關(guān)內(nèi)容，包括組件創(chuàng)建、屬性配置、事件配置以及子組件配置等方面，幫助開(kāi)發(fā)者更好地理解和運(yùn)用這一技術(shù)。

二、創(chuàng)建組件

（一）無(wú)參數(shù)創(chuàng)建

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

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

（二）有參數(shù)創(chuàng)建

若組件的接口定義包含構(gòu)造參數(shù)，則在組件后面的“()”需要配置相應(yīng)參數(shù)。如Image組件的必選參數(shù)src，以及Text組件的非必選參數(shù)content（有多種賦值方式）：

1. 直接賦值字符串
   • Image('https://xyz/test.jpg')
   • Text('test')
2. 使用$r形式引入應(yīng)用資源（適用于多語(yǔ)言場(chǎng)景）
   • Text($r('app.string.title_value'))
3. 無(wú)參數(shù)形式
   • Text()
4. 使用變量或表達(dá)式賦值
   • 變量賦值：Image(this.imagePath)
   • 表達(dá)式賦值：Image('https://' + this.imageUrl)，Text(count: ${this.count})

三、配置屬性

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

1. 配置單個(gè)屬性
   • 配置Text組件字體大?。?code>Text('test').fontSize(12)
2. 配置多個(gè)屬性
   • Image('test.jpg').alt('error.jpg').width(100).height(100)
3. 使用變量或表達(dá)式配置屬性
   • Text('hello').fontSize(this.size)
   • Image('test.jpg').width(this.count % 2 === 0? 100 : 200).height(this.offset + 100)
4. 使用枚舉類型配置屬性（針對(duì)系統(tǒng)組件）
   • 配置Text組件顏色和字體樣式：Text('hello').fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold)

四、配置事件

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

1. 使用箭頭函數(shù)配置事件方法
   • Button('Click me').onClick(() => {this.myText = 'ArkUI';})
2. 使用箭頭函數(shù)表達(dá)式配置事件方法
   • Button('add counter').onClick(() => {this.counter += 2;})
3. 使用組件的成員函數(shù)配置事件方法（需bind this，不推薦）
   • 定義成員函數(shù)：

     myClickHandler(): void {
       this.counter += 2;
     }
     

   • 綁定事件：Button('add counter').onClick(this.myClickHandler.bind(this))
4. 使用聲明的箭頭函數(shù)配置事件方法（可直接調(diào)用，不需要bind this）
   • 聲明箭頭函數(shù)：

     fn = () => {
       console.info(`counter: ${this.counter}`)
       this.counter++
     }
     

   • 綁定事件：Button('add counter').onClick(this.fn)

注意：箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定。匿名函數(shù)可能會(huì)有this指向不明確問(wèn)題，在ArkTS中不允許使用。

五、配置子組件

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

1. 簡(jiǎn)單Column組件配置子組件示例

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

2. 容器組件多級(jí)嵌套示例

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

通過(guò)以上對(duì)鴻蒙Next聲明式UI描述中組件創(chuàng)建、屬性配置、事件配置和子組件配置的介紹，開(kāi)發(fā)者可以更加熟練地運(yùn)用這些技術(shù)構(gòu)建出功能豐富、交互性強(qiáng)的用戶界面，為用戶提供優(yōu)質(zhì)的應(yīng)用體驗(yàn)。