想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

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

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

原本是以碎片化的方式將HarmonyOS應(yīng)用開發(fā)快速掌握，但是在準(zhǔn)備六大布局組合復(fù)雜UI界面Demo時(shí)，很多組件之前都沒有應(yīng)用。因此準(zhǔn)備將知識(shí)體系進(jìn)行細(xì)化，以章節(jié)的形式希望能夠?qū)⒄麄€(gè)HarmonyOS應(yīng)用開發(fā)簡(jiǎn)單化，降低學(xué)習(xí)復(fù)雜度。為什么是從第三章開始?因?yàn)榍皟烧率且恍├碚撔缘闹R(shí)，后續(xù)會(huì)抽時(shí)間整理發(fā)文。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

想了解更多內(nèi)容，請(qǐng)?jiān)L問：

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

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