#2020征文-TV# 第三章 “顏控”時代下鴻蒙如何構建UI界面
https://harmonyos.51cto.com/#zz
為什么是第三章，前面兩章呢?
原本是以碎片化的方式將HarmonyOS應用開發快速掌握，但是在準備六大布局組合復雜UI界面Demo時，很多組件之前都沒有應用。因此準備將知識體系進行細化，以章節的形式希望能夠將整個HarmonyOS應用開發簡單化，降低學習復雜度。為什么是從第三章開始?因為前兩章是一些理論性的知識，后續會抽時間整理發文。
1、本章主要內容
一款優秀的app，不僅僅在于它提供的業務功能，還要有新穎的、美觀的、易操作的UI界面，能夠給用戶全新的，直觀的可視化操作，因此app UI界面的美觀和功能同等重要。
對于程序員來說，一般注重的是應用本身的功能要點，這個功能是如何實現的，那個功能很有特色，但是用戶群體并不僅僅是程序員，對于大眾用戶而言，他們所關注的僅僅是界面美不美，交互操作是否流暢，操作流程是否簡單，能不能達到所期望的效果。所以用戶只關注的是UI界面。
UI界面是呈現在用戶面前，顯示屏上的圖形，用于給用戶展示信息或者提供可交互方式。UI界面是由一個或者多個元素構成，如HelloWorld示例，顯示Hello World字樣的界面是由Text組件構成，我們可以說這個UI界面是由一個元素構成。再比如我們的登錄 頁面，由用戶賬號輸入框、密碼輸入框、驗證碼輸入框、以及登錄 按鈕，雖然它的UI界面上有兩種類型的組件，但我們不能說它是由兩個元素構成，它是由四個元素構成，元素的數量不能因為種類的重復而減少。
因此我們在本章節需要掌握構成頁面的元素。UI界面的元素被統稱為組件，組件根據一定的層級結構組合在一起形成布局。組件在沒有添加到任何的布局時，既無法顯示也無法交互，因此一個UI界面至少要包含一個顯示狀態的布局。所以在接下來的小節中我們將詳細的說明構成UI界面的布局和組件。
2、HarmonyOS應用中的布局和組件
HarmonyOS應用的Ability在屏幕上將顯示一個UI界面，這個界面用來顯示可被用戶查看和交互的內容。在HarmonyOS應用中UI界面是由Component(組件)和ComponentContainer(組件容器，也可稱為布局)構成。組件是繪制在屏幕上的對象(也可稱為元素)，分為兩類，一類是顯示類，另一類是交互類。布局時容納其他布局和組件的容器，可以管理組件的排列方式等屬性，也可以通過復雜的組合來實現復雜的UI界面。
在HarmonyOS應用中，ComponentContainer是Component類子類，也就是說組件容器可以看做特殊的組件，只不過它是由一個或多個布局或組件構成。
Component是UI界面中所有組件的基類，UI界面中的組件一般直接繼承或間接繼承Component類或者它的子類，開發者可以給Component設置事件處理回調來創建一個可交互的組件，存在哪些監聽函數，我們在后面小節來詳細了解。
ComponentContainer作為容器容納Component(組件)或ComponentContainer(組件容器)對象，并對它進行布局。
UI界面中，先有組件容器(布局)，在組件容器中容納一個或多個組件或者組件容器，對它們進行樣式定義，即完善UI界面。
Component結構(引自官文)
3、公共的布局屬性和參數
每種布局都根據自身特點提供LayoutConfig內部類，這個內部類繼承ComponentContainer.LayoutConfig類，其功能是供子組件設定布局屬性和參數，通過指定布局屬性可以約束子組件在布局中的顯示效果。例如：設置布局寬高為MATCH_PARENT(占滿整個屏幕)，設置子組件Text寬高為MATCH_CONTENT(按照內容大小呈現)，同時你也可以給定固定的寬高值。在六大布局中，寬高都是共有的屬性，同時也為不同場景的布局提供了特殊的屬性，比如DirectionalLayout(線性布局)中提供了weight屬性，用于設置權重，而其他布局中就沒有權重的說法。
4、創建和聲明布局
HarmonyOS提供了Ability和AbilitySlice兩個基礎類。Ability可以理解為用戶交互行為發生后，需要渲染指定的視圖進行響應。AbilitySlice可以理解為繪制UI界面和實現具體的邏輯，如按鈕在點擊事件等，它是應用顯示、運行、跳轉的最小單元。AbilitySlice通過setUIContent()為界面設置布局。
組件需要組合并添加到布局中，HarmonyOS Java UI提供了兩種方式，一種是直接在代碼中創建布局，并在布局中添加組件，通過設置它們的屬性來控制UI界面顯示效果。另一種是在XML中聲明布局。這兩種方式創建的布局沒有本質區別，在XML中聲明的布局可以在加載后對布局進行修改，需要設置布局和組件的唯一標識。組件的監聽事件及業務邏輯需要在獲取指定的組件后進行編寫。根據組件的功能分為三種，布局類(放置在布局中的布局就是組件，是一種特殊的組件)，顯示類和交互類。接下來我將對常用的組件進行詳細闡述。
章節前述暫到這里，本前述是我們了解UI界面中組件和布局的理論性知識，從下節開始我們將詳細來說說各類組件和布局。
聲明：碼字不易，轉載請注明出處，系列圖文僅供學習使用，不可用于商用。因轉載作品引發的知識產權或其他法律糾紛的，轉載人須自行承擔一切后果，與本人無關!
https://harmonyos.51cto.com/#zz
