ArkTS語言入門

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

體驗ArkTS

這張圖將一個簡單頁面的組成部分詳細的指了出來，包括裝飾器以及各種各樣的組件等，它的最終展示效果如下：

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

學習ArkTS

接下來，我們將開始正式學習ArkTS語言。

1.應用頁面構(gòu)成

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

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

以上便是一個基本頁面組成的例子。

2.代碼示例

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

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

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

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

常見基礎組件

接下來，我將介紹其中幾個較為常用的組件及其用法：

“Test”----Testy用于文本的展示，當我們在Test中寫入內(nèi)容,如：

Test('test')
.fontsize(50)

此時，將會呈現(xiàn)出如下頁面：

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

在其中寫入：

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

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

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

效果如圖：

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

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

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

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

Button('button')
.width(100)

效果如圖：

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

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

來設置按鈕的形狀，編譯器會自動提示如下類型以供選擇：

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

“image”----image組件是用于圖片展示，使得我們的頁面不單單由文本組成，美化頁面的同時可以展示出更多的內(nèi)容，該組件支持本地圖片和網(wǎng)絡圖片的渲染展示。在上面的基礎上，我們加入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組件有且只有一個參數(shù)，就是圖片的數(shù)據(jù)源，代碼示例是引用resouces目錄下已下載的文件進行展示，接著通過width以及height屬性對圖片大小進行調(diào)整，使得頁面變得協(xié)調(diào)。

此博客由金陵科技學院-開放原子開源社-張子航編寫。