目錄
一、概述
聲明式UI
應用模型
二、常用組件
1、Image：圖片展示組件
示例
配置控制授權申請
2、Text：文本顯示組件
示例?
3、TextInput：文本輸入組件
示例
4、Button：按鈕組件
5、Slider：滑動條組件
三、頁面布局
一、概述
????????方舟開發框架（簡稱ArkUI）為HarmonyOS應用的UI開發提供了完整的基礎設施，包括簡潔的UI語法、豐富的UI功能（組件、布局、動畫以及交互事件），以及實時界面預覽工具等，可以支持開發者進行可視化界面開發。
ArkUI提供了非常多的組件供開發者使用，我們在使用時直接去查看官方文檔即可。按鈕（Button）-添加常用組件-添加組件-基于ArkTS的聲明式開發范式-UI開發-開發-HarmonyOS應用開發
或者我們使用DevEco Studio的時候，將鼠標在一個API上懸停一段時間，就會出現show in Api Reference選項，此時點擊就可以查看IDE自帶的官方API文檔，這個文檔與官方文檔是一摸一樣的，非常好用。
聲明式UI
我們接下來使用的是聲明式開發范式，當然官方也推薦這種開發方式
那什么是聲明式開發？
與聲明式開發相對的就是命令式開發，我們先來看一段代碼
List<Integer> numbers = Arrays.asList(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);// 命令式編程方式：計算所有偶數的平方和int evenSquaredSumImperative = 0;for (int num : numbers) {if (num % 2 == 0) {evenSquaredSumImperative += num * num;}}System.out.println("Imperative: " + evenSquaredSumImperative);在這段Python代碼中，它的目的是計算所有偶數的平方和，最終打印輸出。我們要實現這個功能就要思考怎么去實現，并最終使用代碼邏輯去完成這個功能。
但是我們現在使用聲明式開發
int evenSquaredSumDeclarative = numbers.stream().filter(num -> num % 2 == 0).mapToInt(num -> num * num).sum();System.out.println("Declarative: " + evenSquaredSumDeclarative);?我們直接調用了Java的流式API來進行實現，不用你去實現這個功能的底層邏輯，你只需要思考怎么去使用這些API來完成你需要的功能即可。
我們再來看我們以后使用的ArkUI開發代碼
Text('hello').fontSize(this.size)
Image('test.jpg').width(this.count % 2 === 0 ? 100 : 200) .height(this.offset + 100)在這樣的代碼中，我們幾乎看不到任何操作UI更新的代碼，而這正是聲明式UI的特點，它側重于描述做什么，而不是怎么做，開發者只需要關注UI應該如何呈現，而不需要關心UI的具體實現過程。
開發者要做的，就只是提供不同UI與不同狀態之間的映射關系，而無需編寫如何在不同UI之間進行切換的代碼。
應用模型
隨著系統的演進發展，HarmonyOS先后提供了兩種應用模型：
FA（Feature Ability）模型：HarmonyOS早期版本開始支持的模型，已經不再主推。
Stage模型：HarmonyOS 3.1 Developer Preview版本開始新增的模型，是目前主推且會長期演進的模型。在該模型中，由于提供了AbilityStage、WindowStage等類作為應用組件和Window窗口的“舞臺”，因此稱這種應用模型為Stage模型。?
Stage模型與FA模型最大的區別在于：Stage模型中，多個應用組件共享同一個ArkTS引擎實例；而FA模型中，每個應用組件獨享一個ArkTS引擎實例。因此在Stage模型中，應用組件之間可以方便的共享對象和狀態，同時減少復雜應用運行對內存的占用。Stage模型作為主推的應用模型，開發者通過它能夠更加便利地開發出分布式場景下的復雜應用。
總之，我們以后的開發發使用也會基于Stage模型進行開發
二、常用組件
1、Image：圖片展示組件
（1）、聲明Image組件并設置圖片源
Image(src: string | PixelMap | Resource)
- string格式通常用來加載網絡圖片，因此需要申請網絡訪問權限：ohos.permission.INTERNET
Image('https://xxx.png')
- PiexlMap格式可以加載像素圖，常用在圖片編輯中
Image(pixelMapObject)- Resource格式用來加載本地圖片，用的最多
有兩個目錄可以用來存放本地圖片，media文件夾和rawfile文件夾
//讀取media文件夾下的圖片，圖片后綴可省略
Image($r{'app.media.mate60'})//讀取rawfile文件夾下的圖片，圖片后綴不可省略
Image($rawfile('mate60.png'))（2）、添加圖片屬性
| 屬性 | 說明 |
|---|---|
| width（100） | 寬度 |
| height（120） | 高度 |
| borderRadius（10） | 邊框圓角 |
| interpolation（ImageInterpolation.High） | 圖片插值 |
圖片插值使用用來消除圖片鋸齒的，就是能讓一個模糊的圖片變得平滑清晰
注意：如width（）賦值可以是整型100，也可以是字符串'100%'
如果是數字整型100的話就是100vx（虛擬像素），如果是字符串'100%'就是按照圖片本身占設備屏幕的比例
示例
你可能會疑問，不是說網絡圖片需要申請網絡訪問權限嗎，為什么直接就出來了？
這是因為這個是預覽圖，并不算是真正運行的程序，我們需要啟動虛擬機才算是啟動程序，這時我們就需要配置授權了
配置控制授權申請
應用的APL（Ability Privilege Level）等級分為normal、system_basic和system_core三個等級，默認情況下，應用的APL等級都為normal等級。權限類型分為system_grant和user_grant兩種類型。應用可申請的權限項參見應用權限列表。
需要在module.json5配置文件中聲明一下權限即可
其中name是必須要填的，我們這里只使用name查看一下效果
此時啟動了虛擬機網絡圖片也成功加載出來了。?
注意：忘記了組件的使用方法和API記得直接查看IDE自帶的官方文檔
2、Text：文本顯示組件
（1）、聲明Text組件并設置文本內容
Text（content?: string | Resource）
- string格式，直接填寫文本內容
Text('圖片寬度')- Resource格式，讀取本地資源文件
Text($r('app.string.width_label'))解釋一下這個是什么意思
同樣的$r 符號讀取本地文件，app是默認前綴。
我們的resources目錄下存放著我們的本地資源，在element目錄下有一個叫string的json格式文件，里面存放著一些字符常量。
因此這行代碼的意思就是尋找本地資源目錄下string.json文件中的名為width_label的json對象
這里有一個點需要注意的是，我們在base外面能看到兩個目錄，en_US和zh_CN，里面也有element文件夾
這是為了國際化，系統會檢測你的使用語言版本來使用不同限定詞目錄下的element，en_US就是英文系統，zh_CH就是中文系統
但是需要注意的一點是，它們里面存在的屬性，在base目錄下也要存在才能使用，否則會報錯。因為程序會先去base里面找，然后再去限定詞目錄里面更換值，如果沒有該限定詞目錄，才會使用base里面的默認值。
（2）、添加文本屬性
| 屬性 | 說明 |
|---|---|
| lineHeight（32） | 行高 |
| fontSize（20） | 字體大小 |
| fontColor（'#36D'） | 字體顏色 |
| fontWeight（FontWeight.Medium） | 字體粗細 |
示例?
做一個國際化雙語言的文本展示
base
{"name": "wal","value": "An1ong"}?zh_CN
{"name": "wal","value": "優米"}en_US
{"name": "wal","value": "yummy"}代碼
@Entry
@Component
struct Index {build() {Row() {Column() {Text($r("app.string.wal")).fontColor('#36D').fontSize(38)}}}
}效果
3、TextInput：文本輸入組件
（1）、聲明TextInput組件
TextInput（{ placeholder？：?ResourceStr，text？：ResourceStr}）
- placeholder：輸入文本
TextInput({placeholder: '請輸入無輸入時的提示文本'})- text：輸入框當前的默認文本內容
TextInput({text: '默認文本'})（2）、添加屬性和事件
| 屬性 | 作用 |
|---|---|
| width（150） | 寬 |
| height（30） | 高 |
| backgroundColor（'#FFF'） | 背景色 |
| type（InputType.Password） | 輸入框類型 |
| onChange（ value => { ? ? ? ? //value是文本框的內容 }） | 當輸入框中的內容發生改變時執行事件 |
這里type輸入框類型有好多，有現成的Email格式、Phone格式、Password格式等會對輸入的內容進行約束，這樣就不用自己寫正則表達式來檢驗了。
示例
@Entry
@Component
struct Index {@State imgSize: number = 100build() {Row() {Column() {Image($r('app.media.icon')).width(this.imgSize).interpolation(ImageInterpolation.High)Text('此時圖標的大小為: ' + this.imgSize).fontSize(30)TextInput({placeholder: '請輸入圖片的大小'}).type(InputType.Number).width(250).height(50).onChange(value => {this.imgSize = parseInt(value)})}}}
}
4、Button：按鈕組件
（1）、聲明Button組件，label是按鈕文字
Button（lable？：ResourceStr?）
- 文字型按鈕
Button("點我")- 自定義按鈕，在Button中嵌套其他組件
Button(){Image($r('app.media.search')).width(20).margin(10)
}(2)、添加屬性和響應
| 屬性 | 說明 |
|---|---|
| width（100） | 寬 |
| height（30） | 高 |
| type（ButtonType.Normal） | 按鈕類型 |
| onClick（（）=> { ? ? ? ? //處理點擊事件 }） | 點擊事件 |
type屬性有三種類型
| Capsule | 膠囊型按鈕（圓角默認為高度的一半） |
| Circle | 圓形按鈕 |
| Normal | 普通按鈕（默認不帶圓角） |
5、Slider：滑動條組件
（1）、聲明一個滑動條組件
Slider（options？：SliderOptions）
| 參數 | 作用 |
|---|---|
| min（0） | 最小值 |
| max（100） | 最大值 |
| value（30） | 當前值 |
| step（10） | 滑動步長，默認是1 |
| style：SliderStyle.OutSet | InSet就是滑塊在滑動條里 |
| direction：Axis.Horizontal | 水平滑動，Vertical是垂直滑動 |
| reverse：false | 是否反向滑動，就是大小互換一下 |
(2)、添加屬性和響應?
| 屬性 | 作用 |
|---|---|
| width（'90%'） | 大小 |
| trackThickness（7） | 滑動條粗細 |
| blockColor（） | 滑塊的顏色 |
| trackColor（） | 滑軌的顏色 |
| showTips（true） | 是否展示value百分比提示 |
| onChange（value => { ? ? ? ? //value就是當前值 }） | 滑動觸發事件 |
)
