構(gòu)建第一個(gè)頁面
使用文本組件
工程同步完成后,在 Project 窗口,點(diǎn)擊 entry > src > main > ets > pages ,打開 Index.ets 文件,可以看到頁面由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è)頁面的入口,它需要在main_pages.json
配置才可以在設(shè)備上正常顯示,@Component
修飾符表示Index
是一個(gè)組件,@State
是一個(gè)狀態(tài)標(biāo)識(shí)符,當(dāng)它修飾的變量值改變時(shí)ArkUI開發(fā)框架會(huì)調(diào)用build()
方法進(jìn)行頁面的刷新。添加按鈕
在默認(rèn)頁面基礎(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%') } }
打開預(yù)覽器
在編輯窗口右上角的側(cè)邊工具欄,點(diǎn)擊 Previewer ,然后點(diǎn)擊頁面加號(hào)按鈕,頁面運(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開發(fā)框架就會(huì)重新調(diào)用 build()
方法更新各組件的屬性值, Text
組件會(huì)更新 count
的值,然后頁面刷新,計(jì)數(shù)器的功能就實(shí)現(xiàn)了。
頁面的構(gòu)建流程
讀者可能會(huì)對(duì)上述示例的頁面刷新過程感興趣,筆者簡單介紹一下,上述示例的頁面刷新過程可以分為兩個(gè)過程,一個(gè)是頁面渲染完畢沒有點(diǎn)擊按鈕過程,另一個(gè)是點(diǎn)擊點(diǎn)擊按鈕后頁面數(shù)據(jù)變化過程,筆者分別介紹一下這兩個(gè)過程:
- 頁面初次顯示過程
①、index.ets 源代碼通過編譯工具鏈編譯為帶有類型標(biāo)志的目標(biāo)文件,同時(shí)也包含了如何創(chuàng)建UI結(jié)構(gòu)信息的指令流。
②、通過跨語言調(diào)用并生成了 C++ 層面的 Component 樹(UI描述層)。
③、通過 Component 樹進(jìn)一步生成 Element 樹。 Element 是 Component 的實(shí)例,表示一個(gè)具體的組件節(jié)點(diǎn),它形成的 Element 樹負(fù)責(zé)維持界面在整個(gè)運(yùn)行時(shí)的樹形結(jié)構(gòu),方便計(jì)算更新時(shí)的局部更新算法等。
④、對(duì)于每個(gè)可顯示的 Element 都會(huì)為其創(chuàng)建對(duì)應(yīng)的 RenderNode 。 RenderNode 負(fù)責(zé)一個(gè)節(jié)點(diǎn)的顯示信息,它形成的 Render 樹維護(hù)著整個(gè)界面渲染需要用到的信息,包括位置、大小、繪制命令等。后續(xù)的布局、繪制都是在 Render 樹上進(jìn)行的。
⑤、實(shí)現(xiàn)真正的渲染并顯示繪制結(jié)果。 - 點(diǎn)擊按鈕顯示過程
⑥、點(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 樹的信息。
⑩、狀態(tài)管理模塊更新相應(yīng)的 RenderNode 樹的渲染信息。
?、刷新界面并顯示繪制結(jié)果。
以上頁面整體構(gòu)建流程如下圖所示:
小結(jié)
通過簡單計(jì)數(shù)器示例,讀者先了解一下 OpenHarmony 應(yīng)用的組件、頁面布局,點(diǎn)擊事件以及 @State 修飾符的作用,最后給簡單介紹了一下 OpenHarmony 的頁面構(gòu)建流程。
審核編輯 黃宇
-
計(jì)數(shù)器
+關(guān)注
關(guān)注
32文章
2241瀏覽量
93971 -
鴻蒙
+關(guān)注
關(guān)注
56文章
2267瀏覽量
42485 -
OpenHarmony
+關(guān)注
關(guān)注
25文章
3548瀏覽量
15737
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
評(píng)論