鴻蒙ArkUI開(kāi)發(fā)實(shí)戰(zhàn)：制作一個(gè)【簡(jiǎn)單計(jì)數(shù)器】

構(gòu)建第一個(gè)頁(yè)面

1. 使用文本組件
   工程同步完成后，在 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è)面的刷新。

2. 添加按鈕
   在默認(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%')
     }
   }
   

3. 打開(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ò)程：

1. 頁(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é)果。
2. 點(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)建流程。

審核編輯 黃宇