一、聲明式UI描述
在HarmonyOS的ArkTS語法中，萬物皆組件。ArkTS以聲明方式組合和擴展組件來描述應用程序的UI，同時還提供了基本的屬性、事件和子組件配置方法，幫助開發(fā)者實現(xiàn)應用交互邏輯。根據(jù)組件構(gòu)造方法的不同，創(chuàng)建組件包含有參數(shù)和無參數(shù)兩種方式。
1、無/有參數(shù)組件
無參數(shù)組件：
如果組件的接口定義沒有包含必選構(gòu)造參數(shù)，則組件后面的“()”不需要配置任何內(nèi)容。例如，Divider組件不包含構(gòu)造參數(shù)：
Column() {
Text('HarmonyOS')
Divider()
Button('點我跳轉(zhuǎn)')
}
有參數(shù)組件：
如果組件的接口定義包含構(gòu)造參數(shù)，則在組件后面的“()”配置相應參數(shù)。例如mage組件的必選參數(shù)src。
2、如何查看組件是否有參數(shù)
（1）方法一：
尋找官方文檔：找到文檔下面的“API參考”
在目錄樹下找到“組件參考”，然后找到“基礎組件”，最后就可以看到如button這些基礎組件的使用說明了。
（2）方法二：
按住Ctrl鍵，然后將鼠標移動到組件名上，會出現(xiàn)一個下劃線，點擊一下就能夠進入組件的定義。
在組件的定義再用同樣的方式（Ctrl+鼠標左鍵）進入接口的定義。
比如在接口的定義中就可以看到Text組件參數(shù)的設定：？表示可選參數(shù)，若要填參數(shù)則可以傳遞string和resource類型的參數(shù)。同樣，在Divider的接口函數(shù)中則可以看到不需要傳遞參數(shù)。
二、Image組件的使用
1、定義
Image為圖片組件，常用于在應用中顯示圖片。Image支持加載string、PixelMap和Resource類型的數(shù)據(jù)源，支持png、jpg、bmp、svg和gif類型的圖片格式。
2、網(wǎng)絡圖片類型調(diào)用（網(wǎng)絡圖片需要權(quán)限）
使用網(wǎng)絡圖片時，需要申請權(quán)限ohos.permission.INTERNET。具體申請方式請參考權(quán)限申請聲明。申請位置為entry>src>main>resources>module.json5文件中。
更多申請相關(guān)事項參見官方文檔：訪問控制授權(quán)申請
申請完網(wǎng)絡權(quán)限后，就可以放心地使用網(wǎng)絡圖片作為image參數(shù)了。
3、資源文件類型的調(diào)用（使用$r(‘a(chǎn)pp.media.圖片名’)）
以下便是調(diào)用每個新建項目默認存在的圖標圖片icon.png：
運行效果：
4、引用其他路徑下的資源
//Image組件調(diào)用其他路徑下的圖片：必須加擴展名
Image($rawfile('bg.jpg'))
而且還需要注意，資源名不能包括中文。
三、組件的屬性設置
1、鏈式語法
在同一行同時設定某個組件的多個屬性，可以無限延伸下去。不過為了可讀性，建議每設置一個屬性換一行。
Text('聲明式UI組件').fontSize(50).fontColor(Color.Green).fontWeight(FontWeight.Bold)
2、屬性設置時做運算
//屬性設置時做運算：偶數(shù)則將寬設置為200，奇數(shù)行則設置寬為300
Image($rawfile('bg.jpg')).width(this.n%2 === 0 ? 200 : 300)
3、綁定事件
注意：需要在定義變量n時加上@State修飾，這表明當n值發(fā)生改變時，將重新渲染整個頁面。
@State n: number = 7
//綁定事件，每點擊一次就加1
Text("財富：" + this.n + "W").fontSize(30)
Button('點我++')
.onClick(()=>{
this.n++
})
4、呈現(xiàn)效果
四、補充
1、使用組件的成員函數(shù)配置組件的事件方法
myClickHandler(): void {
this.counter += 2;
}
...
Button('add counter')
.onClick(this.myClickHandler.bind(this))
2、配置子組件
如果組件支持子組件配置，則需在尾隨閉包"{…}"中為組件添加子組件的UI描述。Column、Row、Stack、Grid、List等組件都是容器組件。（在這里，Column組件可以用{space:50}來增加行距）文章來源：http://www.zghlxwxcb.cn/news/detail-768732.html
Column({space:50}) {
Text('Hello')
.fontSize(100)
Divider()
Text(this.myText)
.fontSize(100)
.fontColor(Color.Red)
}
3、多組件嵌套
容器組件均支持子組件配置，可以實現(xiàn)相對復雜的多級嵌套。文章來源地址http://www.zghlxwxcb.cn/news/detail-768732.html
Column() {
Row() {
Image('test1.jpg')
.width(100)
.height(100)
Button('click +1')
.onClick(() => {
console.info('+1 clicked!');
})
}
}
到了這里，關(guān)于鴻蒙4.0開發(fā)筆記之ArkTS語法基礎的UI描述、基礎組件的使用與如何查看組件是否有參數(shù)（八）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
