最通俗易懂的ArkTS語言入門指南

本文為我整理出來最通俗易懂的 ArkTS 語言入門指南。

創建項目

打開我們的 DevEco Studio，進入以下界面：

點擊 Create Project，進行創建：

這里幫我們默認選好第一個了，我們直接點 Next 就可以進入下一步完成創建。

這樣我們的新的項目就創建完成了：

這樣，我們的項目就創建好了。

基本語法概述

當我們打開這個 hello world 的時候，是不是整個人都有些懵？不知道從哪里下手了是不是呀？

不要緊，咱們來把它分解開來：

就可以把他們拆成這幾個部分了，如果看不懂可以暫時忽略下面冒號后面的內容：

裝飾器：用于裝飾類、結構、方法以及變量，并賦予其特殊的含義。如上述示例中 @Entry、@Component 和 @State 都是裝飾器，@Component 表示自定義組件，@Entry 表示該自定義組件為入口組件，@State 表示組件中的狀態變量，狀態變量變化會觸發 UI 刷新。

UI 描述：以聲明式的方式來描述 UI 的結構，例如 build() 方法中的代碼塊。

自定義組件：可復用的 UI 單元，可組合其他組件，如上述被 @Component 裝飾的 struct Hello。

系統組件：ArkUI 框架中默認內置的基礎和容器組件，可直接被開發者調用，比如示例中的 Column、Text、Divider、Button。

屬性方法：組件可以通過鏈式調用配置多項屬性，如 fontSize()、width()、height()、backgroundColor() 等。

事件方法：組件可以通過鏈式調用設置多個事件的響應邏輯，如跟隨在Button后面的 onClick()。

解釋這些東西一大堆，對新手來說，理解有那么一點不容易，只要記住這個大概的格式，就像這個樣子。

@Entry
@Component
structIndex{
//放你寫的數據

build(){
//放你寫的頁面代碼

}
}

布局

下面的內容有些復雜，新手看不懂可以暫時只看線性布局，這個是我們最常用的一種布局方式。

①線性布局（Row、Column）

線性布局（Row、Column）：如果布局內子元素為復數個，且能夠以某種方式線性排列時優先考慮此布局。

②層疊布局（Stack）

層疊布局（Stack）：組件需要有堆疊效果時優先考慮此布局，層疊布局的堆疊效果不會占用或影響其他同容器內子組件的布局空間。

例如 Panel 作為子組件彈出時將其他組件覆蓋更為合理，則優先考慮在外層使用堆疊布局。

③彈性布局（Flex）

彈性布局（Flex）：彈性布局是與線性布局類似的布局方式。區別在于彈性布局默認能夠使子組件壓縮或拉伸。

在子組件需要計算拉伸或壓縮比例時優先使用此布局，可使得多個容器內子組件能有更好的視覺上的填充容器效果。

④相對布局（RelativeContainer）

相對布局（RelativeContainer）：相對布局是在二維空間中的布局方式，不需要遵循線性布局的規則，布局方式更為自由。

通過在子組件上設置錨點規則（AlignRules）使子組件能夠將自己在橫軸、縱軸中的位置與容器或容器內其他子組件的位置對齊。

設置的錨點規則可以天然支持子元素壓縮、拉伸，堆疊或形成多行效果。在頁面元素分布復雜或通過線性布局會使容器嵌套層數過深時推薦使用。

⑤柵格布局（GridRow、GridCol）

柵格布局（GridRow、GridCol）：柵格是多設備場景下通用的輔助定位工具，通過將空間分割為有規律的柵格。

柵格不同于網格布局固定的空間劃分，可以實現不同設備下不同的布局，空間劃分更隨心所欲，從而顯著降低適配不同屏幕尺寸的設計及開發成本，使得整體設計和開發流程更有秩序和節奏感，同時也保證多設備上應用顯示的協調性和一致性，提升用戶體驗。推薦內容相同但布局不同時使用。

⑥媒體查詢（@ohos.mediaquery）

媒體查詢（@ohos.mediaquery）：媒體查詢可根據不同設備類型或同設備不同狀態修改應用的樣式。例如根據設備和應用的不同屬性信息設計不同的布局，以及屏幕發生動態改變時更新應用的頁面布局。

⑦列表（List）

列表（List）：使用列表可以輕松高效地顯示結構化、可滾動的信息。在 ArkUI 中，列表具有垂直和水平布局能力和自適應交叉軸方向上排列個數的布局能力，超出屏幕時可以滾動。列表適合用于呈現同類數據類型或數據類型集，例如圖片和文本。

⑧網格（Grid）

網格（Grid）：網格布局具有較強的頁面均分能力，子組件占比控制能力，是一種重要自適應布局。

網格布局可以控制元素所占的網格數量、設置子組件橫跨幾行或者幾列，當網格容器尺寸發生變化時，所有子組件以及間距等比例調整。

推薦在需要按照固定比例或者均勻分配空間的布局場景下使用，例如計算器、相冊、日歷等。

⑨輪播（Swiper）

輪播（Swiper）：輪播組件通常用于實現廣告輪播、圖片預覽、可滾動應用等。

使用如下：

暫時看不懂也沒關系，我們暫時只看用的最多的線性布局

線性布局分為兩種：

一種是豎直方向的線性布局 Column

另一種是水平方向的線性布局 Row

我們把他們加入我們寫的代碼中：

@Entry
@ComponentstructIndex{
//放你寫的數據
build(){
Row(){
Column(){
//放你寫的組件
}
}
}
}

組件

下面我們就在我們的頁面中添加組件。 常見的組件有：

按鈕

單選框

切換按鈕

進度條

文本顯示

文本輸入

自定義彈窗

視頻播放

XComponent

今天我們先來看一下按鈕和文本顯示。

①組件格式

組件的格式基本上都是這個樣子：

②文本組件使用

這個我們點右邊的這個小眼睛可以預覽效果：

也就是這個樣子：

同樣的，我們在線性布局的下面加上修飾的東西，可以讓這個文字顯示在屏幕中央。

.width('100%') 是讓垂直布局的寬度占據整個屏幕的寬度，讓文本位于左右居中。 同理 .height('100%') 是讓水平布局的高度占據整個屏幕的高度，讓文本上下居中。

③按鈕組件使用

然后我們可以增加一個按鈕 Bottom 組件：

@Entry
@Component
structIndex{
@Statemessage:string='HelloWorld‘
build(){
Row(){
Column(){
//文本組件
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
//按鈕組件
Button('按鈕中的內容')
.onClick(()=>{//點擊
//點擊按鈕后發生的事情
})
}
.width('100%')
}
.height('100%')
}

}

例如我用來演示的這個：

點擊按鈕后，message 的內容就會發生變化，點擊按鈕后的效果如下：

我們今天的內容就到這里。

審核編輯：劉清