想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

 為什么是第三章，前面兩章呢?

原本是以碎片化的方式將HarmonyOS應(yīng)用開發(fā)快速掌握，但是在準備六大布局組合復(fù)雜UI界面Demo時，很多組件之前都沒有應(yīng)用。因此準備將知識體系進行細化，以章節(jié)的形式希望能夠?qū)⒄麄€HarmonyOS應(yīng)用開發(fā)簡單化，降低學習復(fù)雜度。為什么是從第三章開始?因為前兩章是一些理論性的知識，后續(xù)會抽時間整理發(fā)文。

1、本章主要內(nèi)容

一款優(yōu)秀的app，不僅僅在于它提供的業(yè)務(wù)功能，還要有新穎的、美觀的、易操作的UI界面，能夠給用戶全新的，直觀的可視化操作，因此app UI界面的美觀和功能同等重要。

對于程序員來說，一般注重的是應(yīng)用本身的功能要點，這個功能是如何實現(xiàn)的，那個功能很有特色，但是用戶群體并不僅僅是程序員，對于大眾用戶而言，他們所關(guān)注的僅僅是界面美不美，交互操作是否流暢，操作流程是否簡單，能不能達到所期望的效果。所以用戶只關(guān)注的是UI界面。

UI界面是呈現(xiàn)在用戶面前，顯示屏上的圖形，用于給用戶展示信息或者提供可交互方式。UI界面是由一個或者多個元素構(gòu)成，如HelloWorld示例，顯示Hello World字樣的界面是由Text組件構(gòu)成，我們可以說這個UI界面是由一個元素構(gòu)成。再比如我們的登錄 頁面，由用戶賬號輸入框、密碼輸入框、驗證碼輸入框、以及登錄 按鈕，雖然它的UI界面上有兩種類型的組件，但我們不能說它是由兩個元素構(gòu)成，它是由四個元素構(gòu)成，元素的數(shù)量不能因為種類的重復(fù)而減少。

因此我們在本章節(jié)需要掌握構(gòu)成頁面的元素。UI界面的元素被統(tǒng)稱為組件，組件根據(jù)一定的層級結(jié)構(gòu)組合在一起形成布局。組件在沒有添加到任何的布局時，既無法顯示也無法交互，因此一個UI界面至少要包含一個顯示狀態(tài)的布局。所以在接下來的小節(jié)中我們將詳細的說明構(gòu)成UI界面的布局和組件。

2、HarmonyOS應(yīng)用中的布局和組件

HarmonyOS應(yīng)用的Ability在屏幕上將顯示一個UI界面，這個界面用來顯示可被用戶查看和交互的內(nèi)容。在HarmonyOS應(yīng)用中UI界面是由Component(組件)和ComponentContainer(組件容器，也可稱為布局)構(gòu)成。組件是繪制在屏幕上的對象(也可稱為元素)，分為兩類，一類是顯示類，另一類是交互類。布局時容納其他布局和組件的容器，可以管理組件的排列方式等屬性，也可以通過復(fù)雜的組合來實現(xiàn)復(fù)雜的UI界面。

在HarmonyOS應(yīng)用中，ComponentContainer是Component類子類，也就是說組件容器可以看做特殊的組件，只不過它是由一個或多個布局或組件構(gòu)成。

Component是UI界面中所有組件的基類，UI界面中的組件一般直接繼承或間接繼承Component類或者它的子類，開發(fā)者可以給Component設(shè)置事件處理回調(diào)來創(chuàng)建一個可交互的組件，存在哪些監(jiān)聽函數(shù)，我們在后面小節(jié)來詳細了解。

ComponentContainer作為容器容納Component(組件)或ComponentContainer(組件容器)對象，并對它進行布局。

UI界面中，先有組件容器(布局)，在組件容器中容納一個或多個組件或者組件容器，對它們進行樣式定義，即完善UI界面。

Component結(jié)構(gòu)(引自官文)

3、公共的布局屬性和參數(shù)

每種布局都根據(jù)自身特點提供LayoutConfig內(nèi)部類，這個內(nèi)部類繼承ComponentContainer.LayoutConfig類，其功能是供子組件設(shè)定布局屬性和參數(shù)，通過指定布局屬性可以約束子組件在布局中的顯示效果。例如：設(shè)置布局寬高為MATCH_PARENT(占滿整個屏幕)，設(shè)置子組件Text寬高為MATCH_CONTENT(按照內(nèi)容大小呈現(xiàn))，同時你也可以給定固定的寬高值。在六大布局中，寬高都是共有的屬性，同時也為不同場景的布局提供了特殊的屬性，比如DirectionalLayout(線性布局)中提供了weight屬性，用于設(shè)置權(quán)重，而其他布局中就沒有權(quán)重的說法。

4、創(chuàng)建和聲明布局

HarmonyOS提供了Ability和AbilitySlice兩個基礎(chǔ)類。Ability可以理解為用戶交互行為發(fā)生后，需要渲染指定的視圖進行響應(yīng)。AbilitySlice可以理解為繪制UI界面和實現(xiàn)具體的邏輯，如按鈕在點擊事件等，它是應(yīng)用顯示、運行、跳轉(zhuǎn)的最小單元。AbilitySlice通過setUIContent()為界面設(shè)置布局。

組件需要組合并添加到布局中，HarmonyOS Java UI提供了兩種方式，一種是直接在代碼中創(chuàng)建布局，并在布局中添加組件，通過設(shè)置它們的屬性來控制UI界面顯示效果。另一種是在XML中聲明布局。這兩種方式創(chuàng)建的布局沒有本質(zhì)區(qū)別，在XML中聲明的布局可以在加載后對布局進行修改，需要設(shè)置布局和組件的唯一標識。組件的監(jiān)聽事件及業(yè)務(wù)邏輯需要在獲取指定的組件后進行編寫。根據(jù)組件的功能分為三種，布局類(放置在布局中的布局就是組件，是一種特殊的組件)，顯示類和交互類。接下來我將對常用的組件進行詳細闡述。

章節(jié)前述暫到這里，本前述是我們了解UI界面中組件和布局的理論性知識，從下節(jié)開始我們將詳細來說說各類組件和布局。

聲明：碼字不易，轉(zhuǎn)載請注明出處，系列圖文僅供學習使用，不可用于商用。因轉(zhuǎn)載作品引發(fā)的知識產(chǎn)權(quán)或其他法律糾紛的，轉(zhuǎn)載人須自行承擔一切后果，與本人無關(guān)!

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz