1.基礎
聲明式UI:??
??核心:?? 你??聲明??你想要UI是什么樣子(在build()方法里描述),而不是一步步命令式地創建和操作View對象(findViewById, setText, setOnClickListener)。
模塊化:?? 雖然一個頁面通常在一個文件,但復雜的UI可以通過??自定義組件??(也是struct)拆分成多個可復用的部分,這些組件可以放在不同的文件中。
裝飾器(@xxx):??
??關鍵特性:?? ArkTS大量使用裝飾器來增強類、結構體、屬性、方法的行為。
??常見裝飾器:??
@Entry: 標記入口組件。
@State: 標記組件內部的狀態變量,變化時驅動UI更新。
@Prop: 用于父子組件間單向數據傳遞(父->子)。
@Link: 用于父子組件間雙向數據綁定。
@Observed& @ObjectLink: 用于觀察復雜對象(類)內部屬性的變化。
@Builder: 定義可復用的UI片段(Builder方法)。
??注意:?? 理解不同裝飾器的用途和作用域是掌握ArkTS狀態管理和組件通信的關鍵。
??組合優于繼承:?? 通過嵌套組件來構建復雜UI,而不是繼承復雜的基類。
??鏈式調用:?? 組件的屬性設置和事件綁定通常采用鏈式調用語法(如Button(“Click”).onClick(…).width(100)),使代碼更簡潔。
反正一句話,很像vue.js,但更好用
// 安卓:XML布局 + ViewModel
// 鴻蒙:ArkTS聲明式UI
@Entry
struct HelloPage { @State message: string = "Hello Harmony" build() { Column() { Text(this.message) // 類似Jetpack Compose Button("Click").onClick(() => this.message = "Clicked!") } }
}
這就是紅碼里面完整的一個頁面所有的東西。需要一個文件就可以了。在安卓里面它其實是需要一個布局文件,還需要一個邏輯控制文件。
??@Entry
它標記這個結構體(struct)是應用的??入口頁面??。相當于Android中的MainActivity或在AndroidManifest.xml中標記為LAUNCHER的Activity。
作用:?? 告訴鴻蒙系統,當用戶啟動應用時,應該首先加載并顯示這個頁面。
??注意:?? 一個應用可以有多個@Entry裝飾的頁面,但通常有一個主入口,鴻蒙應用可以有多個入口,只要加上這個就是一個入口,想到于安卓的暴露的頁面,別人也能通過這個頁面拉起你的app(需要再module.json5里面配置才可)
struct HelloPage
這就是一個結構體,這個結構體就代表了一個頁面
@State message: string = “Hello Harmony”
一個私有的狀態變量,Text(this.message) 這里面通過這樣的方式綁定到了text的組件上,可以通過改變變量的值來刷新ui,類似vue.js
??build() { … }
用來定義布局結構,有且只有一個
UI描述 (Column() { … })
Button(“Click”):?? 這是一個??按鈕組件??。顯示文本“Click”。
??.onClick(() => this.message = “Clicked!”):?? 這是給Button組件添加的??事件處理函數??(使用??鏈式調用??語法)這里面this.message = "Clicked!"改變了變量的值,會導致界面同時刷新成改變后的值