鴻蒙ArkTS語言入門——構建應用頁面
ArkTS語言入門
在學習ArkTS語言之前，我們首先需要一個能夠編譯并運行該語言的工具DevEco Studio，該工具具體的安裝及配置流程可按照https://ost.51cto.com/posts/24547這位博主所指導的進行操作，這里就不再贅述。
體驗ArkTS
這張圖將一個簡單頁面的組成部分詳細的指了出來，包括裝飾器以及各種各樣的組件等，它的最終展示效果如下：
對“Click me”進行點擊，將會呈現如下效果：
學習ArkTS
接下來，我們將開始正式學習ArkTS語言。
1.應用頁面構成
上圖即為一個基本頁面的布局，我將以上圖為例，逐一講解其中的內容：首先，我先講解上圖中每一個節點所代表的含義：
- “APP”----這個即是軟件本身，所有的操作都將在它的基礎上完成。
- “Column”----column是一個主軸為縱向的容器，在它上面的內容將以縱向排列。
- “Row”----與column相反，Row是一個主軸為橫向的容器，在它上面的內容將以橫向排列。
- “Test”----Test是文本容器，可以在其中輸入文字并將其展示在頁面上。
- “Image”----Image是圖片容器，可以向其中傳入圖片并將其展示在頁面上。
- “Slider”----Slider是一個滑動條組件，用于控制一些可調節的頁面內容。
- “Button”----Button則是一個按鈕，用于實現頁面與用戶的交互功能。接下來，我將由這個樹狀圖，展示如何實現頁面的布局：
以上便是一個基本頁面組成的例子。
2.代碼示例
上圖便是前文中的頁面構成的代碼示例，接下來，我將逐一分析各段代碼的作用：
如上圖所示，這類以“@”開頭的叫做裝飾器，裝飾器的作用是賦予被裝飾內容某一種能力，例如“@Entry”,這個裝飾器的作用是將被它裝飾的組件作為頁面的入口，在頁面被加載時該組件將會被渲染展示。而“@Component”則是用于裝飾結構體struct，表示該結構體是一個UI組件。
接著，如圖所示為build方法，頁面內所有內容將在build方法內寫入，每個組件都必須實現build方法，用于定義組件的聲明式UI描述。
接下來便是頁面的組成部分了，由圖示，第一個Column容器在“{}”中包含了第二層的Test，Column，Row容器，而第二層的容器則又在“{}”中包含了第三層的內容，以此類推......,如果需要更改，增加或刪減內容，可以直接在對應的層級中進行操作。
常見基礎組件
接下來，我將介紹其中幾個較為常用的組件及其用法：
“Test”----Testy用于文本的展示，當我們在Test中寫入內容,如：
Test('test')
.fontsize(50)此時，將會呈現出如下頁面：
這里的fontsize為Test組件的屬性，用于設置文本內容的大小。在Test組件中，還可以直接引用存放在resouces目錄下的資源文件，例如我們在resouces目錄下創建string文件。
在其中寫入：
“string”：[{
"name":"EntryAbility_lable",
"value":"lable"
}]其中string代表數據類型，name代表該文件其中內容的名稱，value則代表指定內容中值。接著，可以通過" $r('') "在Test組件中引用該數據，例如：
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組件是用于圖片展示，使得我們的頁面不單單由文本組成，美化頁面的同時可以展示出更多的內容，該組件支持本地圖片和網絡圖片的渲染展示。在上面的基礎上，我們加入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組件有且只有一個參數，就是圖片的數據源，代碼示例是引用resouces目錄下已下載的文件進行展示，接著通過width以及height屬性對圖片大小進行調整，使得頁面變得協調。
此博客由金陵科技學院-開放原子開源社-張子航編寫。
