ArkTS語(yǔ)言入門

在學(xué)習(xí)ArkTS語(yǔ)言之前，我們首先需要一個(gè)能夠編譯并運(yùn)行該語(yǔ)言的工具DevEco Studio，該工具具體的安裝及配置流程可按照https://ost.51cto.com/posts/24547這位博主所指導(dǎo)的進(jìn)行操作，這里就不再贅述。

體驗(yàn)ArkTS

這張圖將一個(gè)簡(jiǎn)單頁(yè)面的組成部分詳細(xì)的指了出來(lái)，包括裝飾器以及各種各樣的組件等，它的最終展示效果如下：

對(duì)“Click me”進(jìn)行點(diǎn)擊，將會(huì)呈現(xiàn)如下效果：

學(xué)習(xí)ArkTS

接下來(lái)，我們將開(kāi)始正式學(xué)習(xí)ArkTS語(yǔ)言。

1.應(yīng)用頁(yè)面構(gòu)成

上圖即為一個(gè)基本頁(yè)面的布局，我將以上圖為例，逐一講解其中的內(nèi)容：首先，我先講解上圖中每一個(gè)節(jié)點(diǎn)所代表的含義：

• “APP”----這個(gè)即是軟件本身，所有的操作都將在它的基礎(chǔ)上完成。
• “Column”----column是一個(gè)主軸為縱向的容器，在它上面的內(nèi)容將以縱向排列。
• “Row”----與column相反，Row是一個(gè)主軸為橫向的容器，在它上面的內(nèi)容將以橫向排列。
• “Test”----Test是文本容器，可以在其中輸入文字并將其展示在頁(yè)面上。
• “Image”----Image是圖片容器，可以向其中傳入圖片并將其展示在頁(yè)面上。
• “Slider”----Slider是一個(gè)滑動(dòng)條組件，用于控制一些可調(diào)節(jié)的頁(yè)面內(nèi)容。
• “Button”----Button則是一個(gè)按鈕，用于實(shí)現(xiàn)頁(yè)面與用戶的交互功能。接下來(lái)，我將由這個(gè)樹(shù)狀圖，展示如何實(shí)現(xiàn)頁(yè)面的布局：

以上便是一個(gè)基本頁(yè)面組成的例子。

2.代碼示例

上圖便是前文中的頁(yè)面構(gòu)成的代碼示例，接下來(lái)，我將逐一分析各段代碼的作用：

如上圖所示，這類以“@”開(kāi)頭的叫做裝飾器，裝飾器的作用是賦予被裝飾內(nèi)容某一種能力，例如“@Entry”,這個(gè)裝飾器的作用是將被它裝飾的組件作為頁(yè)面的入口，在頁(yè)面被加載時(shí)該組件將會(huì)被渲染展示。而“@Component”則是用于裝飾結(jié)構(gòu)體struct，表示該結(jié)構(gòu)體是一個(gè)UI組件。

接著，如圖所示為build方法，頁(yè)面內(nèi)所有內(nèi)容將在build方法內(nèi)寫入，每個(gè)組件都必須實(shí)現(xiàn)build方法，用于定義組件的聲明式UI描述。

接下來(lái)便是頁(yè)面的組成部分了，由圖示，第一個(gè)Column容器在“{}”中包含了第二層的Test，Column，Row容器，而第二層的容器則又在“{}”中包含了第三層的內(nèi)容，以此類推......,如果需要更改，增加或刪減內(nèi)容，可以直接在對(duì)應(yīng)的層級(jí)中進(jìn)行操作。

常見(jiàn)基礎(chǔ)組件

接下來(lái)，我將介紹其中幾個(gè)較為常用的組件及其用法：

“Test”----Testy用于文本的展示，當(dāng)我們?cè)赥est中寫入內(nèi)容,如：

Test('test')
.fontsize(50)

此時(shí)，將會(huì)呈現(xiàn)出如下頁(yè)面：

這里的fontsize為Test組件的屬性，用于設(shè)置文本內(nèi)容的大小。在Test組件中，還可以直接引用存放在resouces目錄下的資源文件，例如我們?cè)趓esouces目錄下創(chuàng)建string文件。

在其中寫入：

“string”：[{
"name":"EntryAbility_lable",
"value":"lable"
}]

其中string代表數(shù)據(jù)類型，name代表該文件其中內(nèi)容的名稱，value則代表指定內(nèi)容中值。接著，可以通過(guò)"   $r('')   "在Test組件中引用該數(shù)據(jù)，例如：

Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor('#ff2233')

效果如圖：

在其中又加入了fontColor屬性，用于改變文本顏色，當(dāng)然，也可以通過(guò)相同方法，引用存放在resouces目錄下Color文件，完成對(duì)文本顏色的改變，形如：

Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))

“Button”----Button是一個(gè)按鈕組件，用于頁(yè)面與用戶的交互。在上面的基礎(chǔ)上，我們加入Button組件。

Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))

Button('button')
.width(100)

效果如圖：

在Button后的括號(hào)中可以寫入顯示在按鈕上的文本，并通過(guò)width屬性設(shè)置其大小，接著，我們可以通過(guò)形如。

Button('button'，{type：ButtonType.Normal})
.width(100)

來(lái)設(shè)置按鈕的形狀，編譯器會(huì)自動(dòng)提示如下類型以供選擇：

包括圓形，矩形，圓角矩形等。

“image”----image組件是用于圖片展示，使得我們的頁(yè)面不單單由文本組成，美化頁(yè)面的同時(shí)可以展示出更多的內(nèi)容，該組件支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。在上面的基礎(chǔ)上，我們加入Image組件

Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor($r('app.Color.lable_color'))

Button('button')
.width(100)

Image($r('app.media.loading'))
.width(100)
.height(100)

效果如圖：

Image組件有且只有一個(gè)參數(shù)，就是圖片的數(shù)據(jù)源，代碼示例是引用resouces目錄下已下載的文件進(jìn)行展示，接著通過(guò)width以及height屬性對(duì)圖片大小進(jìn)行調(diào)整，使得頁(yè)面變得協(xié)調(diào)。

此博客由金陵科技學(xué)院-開(kāi)放原子開(kāi)源社-張子航編寫。