OpenHarmony 北向應用開發—ArkTS語言入門（構建應用頁面）
ArkTS語言入門
在學習ArkTS語言之前，我們首先需要一個能夠編譯并運行該語言的工具DevEco Studio，該工具具體的安裝及配置流程可按照https://ost.51cto.com/posts/24547這位博主所指導的進行操作，這里就不再贅述。
了解ArkTS
ArkTS是OpenHarmony優選的主力應用開發語言。ArkTS圍繞應用開發在TypeScript（簡稱TS）生態基礎上做了進一步擴展，繼承了TS的所有特性，是TS的超集。因此，在學習ArkTS語言之前，建議開發者具備TS語言開發能力。
體驗ArkTS
首先，我們來看這張圖：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
這張圖將一個簡單頁面的組成部分詳細的指了出來，包括裝飾器以及各種各樣的組件等，它的最終展示效果如下：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
對“Click me”進行點擊，將會呈現如下效果：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
學習ArkTS
接下來，我們將開始正式學習ArkTS語言。
1、應用頁面構成
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
上圖即為一個基本頁面的布局，我將以上圖為例，逐一講解其中的內容：
首先，我先講解上圖中每一個節點所代表的含義：
- “APP”----這個即是軟件本身，所有的操作都將在它的基礎上完成。
- “Column”----column是一個主軸為縱向的容器，在它上面的內容將以縱向排列。
- “Row”----與column相反，Row是一個主軸為橫向的容器，在它上面的內容將以橫向排列。
- “Test”----Test是文本容器，可以在其中輸入文字并將其展示在頁面上。
- “Image”----Image是圖片容器，可以向其中傳入圖片并將其展示在頁面上。
- “Slider”----Slider是一個滑動條組件，用于控制一些可調節的頁面內容。
- “Button”----Button則是一個按鈕，用于實現頁面與用戶的交互功能。
接下來，我將由這個樹狀圖，展示如何實現頁面的布局：
此時為未布局的狀態。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
將第一層的column容器填充到頁面當中。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
接著，將第二層的Test,Column按順序縱向排列在第一層Column容器中。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
再將第三層的Row,Slider按順序縱向排列在第二層的column容器中。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
再將第四層的Image和Test按順序橫向排列在第三層的Row容器中。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
最后類似上面的步驟，將最后的Row以及其中的兩個Button按鈕排列在第二層的Column容器中。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
以上便是一個基本頁面組成的例子。
2、代碼示例
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
上圖便是前文中的頁面構成的代碼示例，接下來，我將逐一分析各段代碼的作用：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
如上圖所示，這類以“@”開頭的叫做裝飾器，裝飾器的作用是賦予被裝飾內容某一種能力，例如“@Entry”,這個裝飾器的作用是將被它裝飾的組件作為頁面的入口，在頁面被加載時該組件將會被渲染展示。而“@Component”則是用于裝飾結構體struct，表示該結構體是一個UI組件。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
接著，如圖所示為build方法，頁面內所有內容將在build方法內寫入，每個組件都必須實現build方法，用于定義組件的聲明式UI描述。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
接下來便是頁面的組成部分了，由圖示，第一個Column容器在“{}”中包含了第二層的Test，Column，Row容器，而第二層的容器則又在“{}”中包含了第三層的內容，以此類推…,如果需要更改，增加或刪減內容，可以直接在對應的層級中進行操作。
常見基礎組件
當我們了解了一個頁面的布局以及代碼的寫法后，我們就可以接觸更多的組件，讓我們的頁面變得更加美觀并擁有更豐富的功能。下圖便是一部分組件。
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
接下來，我將介紹其中幾個較為常用的組件及其用法：
“Test”----Testy用于文本的展示，當我們在Test中寫入內容,如：
Test('test')
.fontsize(50)此時，將會呈現出如下頁面：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
這里的fontsize為Test組件的屬性，用于設置文本內容的大小。
在Test組件中，還可以直接引用存放在resouces目錄下的資源文件，例如我們在resouces目錄下創建string文件
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
在其中寫入：
“string”：[{
"name":"EntryAbility_lable",
"value":"lable"
}]其中string代表數據類型，name代表該文件其中內容的名稱，value則代表指定內容中值。
接著，可以通過" $r(‘’) "在Test組件中引用該數據，例如：
Test($r('app.string.EntryAbility_lable'))
.fontsize(50)
.fontColor('#ff2233')效果如圖：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
在其中又加入了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)效果如圖：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
在Button后的括號中可以寫入顯示在按鈕上的文本，并通過width屬性設置其大小，接著，我們可以通過形如
Button('button'，{type：ButtonType.Normal})
.width(100)來設置按鈕的形狀，編譯器會自動提示如下類型以供選擇：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
包括圓形，矩形，圓角矩形等。
“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)效果如圖：
【OpenHarmony 北向應用開發】ArkTS語言入門（構建應用頁面）-開源基礎軟件社區
Image組件有且只有一個參數，就是圖片的數據源，代碼示例是引用resouces目錄下已下載的文件進行展示，接著通過width以及height屬性對圖片大小進行調整，使得頁面變得協調。
