構(gòu)建第一個(gè)頁(yè)面
使用文本組件
工程同步完成后,在 Project 窗口,點(diǎn)擊 entry > src > main > ets > pages ,打開(kāi) Index.ets 文件,可以看到頁(yè)面由Row
、Column
、Text
組件組成。 index.ets 文件的示例如下:@Entry @Component struct Index { @State message: string = 'Hello World' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) } .width('100%') } .height('100%') } }
@Entry
修飾符表示一個(gè)頁(yè)面的入口,它需要在main_pages.json
配置才可以在設(shè)備上正常顯示,@Component
修飾符表示Index
是一個(gè)組件,@State
是一個(gè)狀態(tài)標(biāo)識(shí)符,當(dāng)它修飾的變量值改變時(shí)ArkUI開(kāi)發(fā)框架會(huì)調(diào)用build()
方法進(jìn)行頁(yè)面的刷新。添加按鈕
在默認(rèn)頁(yè)面基礎(chǔ)上,我們添加一個(gè)Button
組件,作為按鈕接受用戶點(diǎn)擊的動(dòng)作,從而實(shí)現(xiàn)計(jì)數(shù)器自增操作。 " index.ets " 文件的示例如下:@Entry @Component struct Index { @State count: number = 0; // 狀態(tài)數(shù)據(jù) build() { Stack({alignContent: Alignment.BottomEnd}) { // 堆疊式布局 Text(this.count.toString()) // 顯示文本 .fontSize(50) // 文字大小 .margin(50) // 外邊距 .size({width: '100%', height: '100%'}) // 控件大小 Button('+') // 顯示一個(gè)+按鈕 .size({width: 80, height: 80}) // 按鈕大小 .fontSize(50) // 按鈕文字大小 .onClick(() = > { // 按鈕點(diǎn)擊事件 this.count++; // count累加,觸發(fā)build()方法回調(diào) }) .margin(50) } .width('100%') .height('100%') } }
打開(kāi)預(yù)覽器
在編輯窗口右上角的側(cè)邊工具欄,點(diǎn)擊 Previewer ,然后點(diǎn)擊頁(yè)面加號(hào)按鈕,頁(yè)面運(yùn)行效果如下圖所示:
學(xué)習(xí)文檔參考:[docs.qq.com/doc/DUmN4VVhBd3NxdExK
]
根據(jù)運(yùn)行截圖,我們點(diǎn)擊了加號(hào)按鈕,觸發(fā)按鈕的 onClick 事件回調(diào),由于在回調(diào)里執(zhí)行了 count++ 操作導(dǎo)致了 count 的值發(fā)生了改變,又因?yàn)?count 被 @State
修飾符修飾,所以ArkUI開(kāi)發(fā)框架就會(huì)重新調(diào)用 build()
方法更新各組件的屬性值, Text
組件會(huì)更新 count
的值,然后頁(yè)面刷新,計(jì)數(shù)器的功能就實(shí)現(xiàn)了。
頁(yè)面的構(gòu)建流程
讀者可能會(huì)對(duì)上述示例的頁(yè)面刷新過(guò)程感興趣,筆者簡(jiǎn)單介紹一下,上述示例的頁(yè)面刷新過(guò)程可以分為兩個(gè)過(guò)程,一個(gè)是頁(yè)面渲染完畢沒(méi)有點(diǎn)擊按鈕過(guò)程,另一個(gè)是點(diǎn)擊點(diǎn)擊按鈕后頁(yè)面數(shù)據(jù)變化過(guò)程,筆者分別介紹一下這兩個(gè)過(guò)程:
- 頁(yè)面初次顯示過(guò)程
①、index.ets 源代碼通過(guò)編譯工具鏈編譯為帶有類型標(biāo)志的目標(biāo)文件,同時(shí)也包含了如何創(chuàng)建UI結(jié)構(gòu)信息的指令流。
②、通過(guò)跨語(yǔ)言調(diào)用并生成了 C++ 層面的 Component 樹(shù)(UI描述層)。
③、通過(guò) Component 樹(shù)進(jìn)一步生成 Element 樹(shù)。 Element 是 Component 的實(shí)例,表示一個(gè)具體的組件節(jié)點(diǎn),它形成的 Element 樹(shù)負(fù)責(zé)維持界面在整個(gè)運(yùn)行時(shí)的樹(shù)形結(jié)構(gòu),方便計(jì)算更新時(shí)的局部更新算法等。
④、對(duì)于每個(gè)可顯示的 Element 都會(huì)為其創(chuàng)建對(duì)應(yīng)的 RenderNode 。 RenderNode 負(fù)責(zé)一個(gè)節(jié)點(diǎn)的顯示信息,它形成的 Render 樹(shù)維護(hù)著整個(gè)界面渲染需要用到的信息,包括位置、大小、繪制命令等。后續(xù)的布局、繪制都是在 Render 樹(shù)上進(jìn)行的。
⑤、實(shí)現(xiàn)真正的渲染并顯示繪制結(jié)果。 - 點(diǎn)擊按鈕顯示過(guò)程
⑥、點(diǎn)擊屏幕,事件傳遞到組件上,組件的 onClick 事件方法被觸發(fā)執(zhí)行。
⑦、由于 onClick 事件方法中 @State 修飾的變量值改變了,相應(yīng)的 getter / setting 函數(shù)會(huì)被觸發(fā)。
⑧、狀態(tài)管理模塊定位出與之關(guān)聯(lián)的UI組件。
⑨、狀態(tài)管理模塊更新相應(yīng)的 Element 樹(shù)的信息。
⑩、狀態(tài)管理模塊更新相應(yīng)的 RenderNode 樹(shù)的渲染信息。
?、刷新界面并顯示繪制結(jié)果。
以上頁(yè)面整體構(gòu)建流程如下圖所示:
小結(jié)
通過(guò)簡(jiǎn)單計(jì)數(shù)器示例,讀者先了解一下 OpenHarmony 應(yīng)用的組件、頁(yè)面布局,點(diǎn)擊事件以及 @State 修飾符的作用,最后給簡(jiǎn)單介紹了一下 OpenHarmony 的頁(yè)面構(gòu)建流程。
審核編輯 黃宇
-
計(jì)數(shù)器
+關(guān)注
關(guān)注
32文章
2248瀏覽量
94187 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2295瀏覽量
42638 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3613瀏覽量
15986
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論