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

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

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

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

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

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

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

對(duì)于程序員來(lái)說(shuō)，一般注重的是應(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)成，我們可以說(shuō)這個(gè)UI界面是由一個(gè)元素構(gòu)成。再比如我們的登錄 頁(yè)面，由用戶賬號(hào)輸入框、密碼輸入框、驗(yàn)證碼輸入框、以及登錄 按鈕，雖然它的UI界面上有兩種類(lèi)型的組件，但我們不能說(shuō)它是由兩個(gè)元素構(gòu)成，它是由四個(gè)元素構(gòu)成，元素的數(shù)量不能因?yàn)榉N類(lèi)的重復(fù)而減少。

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

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

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

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

Component是UI界面中所有組件的基類(lèi)，UI界面中的組件一般直接繼承或間接繼承Component類(lèi)或者它的子類(lèi)，開(kāi)發(fā)者可以給Component設(shè)置事件處理回調(diào)來(lái)創(chuàng)建一個(gè)可交互的組件，存在哪些監(jiān)聽(tīng)函數(shù)，我們?cè)诤竺嫘」?jié)來(lái)詳細(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)部類(lèi)，這個(gè)內(nèi)部類(lèi)繼承ComponentContainer.LayoutConfig類(lèi)，其功能是供子組件設(shè)定布局屬性和參數(shù)，通過(guò)指定布局屬性可以約束子組件在布局中的顯示效果。例如：設(shè)置布局寬高為MATCH_PARENT(占滿整個(gè)屏幕)，設(shè)置子組件Text寬高為MATCH_CONTENT(按照內(nèi)容大小呈現(xiàn))，同時(shí)你也可以給定固定的寬高值。在六大布局中，寬高都是共有的屬性，同時(shí)也為不同場(chǎng)景的布局提供了特殊的屬性，比如DirectionalLayout(線性布局)中提供了weight屬性，用于設(shè)置權(quán)重，而其他布局中就沒(méi)有權(quán)重的說(shuō)法。

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

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

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

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

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

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

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

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