鴻蒙HarmonyOS應(yīng)用開發(fā)-Component體系介紹（一）
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
在HarmonyOS的UI框架中，Component為用戶界面提供基本組件，Component類位于ohos.agp.components包中，直接派生自java.lang.Object,并且是HarmonyOS中所有界面組件的直接或間接父類。每一個(gè)組件在屏幕上占用一個(gè)矩形區(qū)域，在這個(gè)區(qū)域中對繪制和事件處理做出響應(yīng)。Conpoment是其他控件的基類，用于創(chuàng)建交互式的各類組件。Component的直接子類ComponentContainer是所有布局的基類，為其他組件或組件組定義布局屬性。下面來看一下Component在HarmonyOS中的繼承體系(橙色邊框類只列出部分子類)：
Component的直接子類組件有6個(gè)，這6個(gè)組件在功能上可劃分為兩類，一類是顯示類交互組件如Text、Image、IindexBar、ProcessBar和PageSliderIndicator，另一類是容器類組件ComponentContainer及其子類，用于容納其他布局或者組件，值得注意一點(diǎn)，ComponentContainer類是一個(gè)抽象類，是所有布局或容器組件的父類。為便于理解，下圖展示一個(gè)簡易的網(wǎng)站頁面的組成結(jié)構(gòu)：
在上圖中可以看出，最外層Layout1是一個(gè)布局組件，用來容納其他種類的組件；頭部是一個(gè)Image組件,用來展示圖片，在中間部分的左側(cè)是一個(gè)列表類的容器組件，用于容納多個(gè)Text組件;在中間部分右側(cè)又是一個(gè)Layout組件，以此類推，最下面的Layout3組件中，容納了兩個(gè)Button組件。上面只是一個(gè)簡單頁面組成元素的示例，在實(shí)際開發(fā)過程中，正式編碼之前也要做一個(gè)頁面規(guī)劃，這樣才能夠在開發(fā)中對自己頁面有一個(gè)整體的清晰認(rèn)識。
在了解Component類是什么之后，接下來為大家介紹Component類的內(nèi)部組成。首先Component類是一個(gè)嵌套類(其他組件類也是嵌套類)，在Component類內(nèi)部定義了眾多內(nèi)部類/接口，除此之外還定義了各種獲取和設(shè)置組件屬性信息的方法。
1. Component的內(nèi)部類/接口
Component的內(nèi)部類通常是監(jiān)聽器(大多以Listener結(jié)尾)，，用于回調(diào)從而對界面元素變化做出響應(yīng)，在Harmony OS中，為組件注冊監(jiān)聽器由統(tǒng)自動(dòng)注冊，并且響應(yīng)事件的回調(diào)方法也有操作系統(tǒng)自動(dòng)調(diào)用。其次，這些監(jiān)聽器主要用于監(jiān)聽如單擊、雙擊、長按、以界面元素繪制等事件，在這些事件中，編程人員可以在回調(diào)方法中自定義事件處理邏輯來對這些事件做出響應(yīng)。以下代碼片段展示如何為Button設(shè)置事件監(jiān)聽器：
- //為按鈕設(shè)置點(diǎn)擊回調(diào)：第一種寫法,直接實(shí)例化監(jiān)聽器接口并實(shí)現(xiàn)回調(diào)方法onClick
- Button button = (Button) findComponentById(ResourceTable.Id_button);
- button.setClickedListener(new Component.ClickedListener() {
- @Override
- public void onClick(Component component) {
- /*
- 開發(fā)人員可以自定義事件處理邏輯，如獲取組件、啟動(dòng)新的bility等
- */
- Text text = (Text) component.findComponentById(ResourceTable.Id_type_text);
- }
- });
- /*
- 為按鈕設(shè)置點(diǎn)擊回調(diào)：第二種寫法，lambda表達(dá)式寫法，前提要知道監(jiān)聽器中方法的參數(shù)列表：如下面的“(component)”的參數(shù)個(gè)數(shù)與監(jiān)聽器里的方法onClick的參數(shù)個(gè)數(shù)相同即可
- */
- Button button = (Button) findComponentById(ResourceTable.Id_button);
- button.setClickedListener((component) -> {
- /*
- 開發(fā)人員可以自定義事件處理邏輯，如獲取組件、啟動(dòng)新的bility等
- */
- Text text = (Text) component.findComponentById(ResourceTable.Id_type_text);
- });
在上面的代碼片段中，分兩種方式演示了如何獲取組件元素并且設(shè)置組件的點(diǎn)擊事件監(jiān)聽器。
在第一種方式中，通過實(shí)例化Component的內(nèi)部靜態(tài)接口ClickedListener來為button設(shè)置監(jiān)聽器，同時(shí)開發(fā)人員需要實(shí)現(xiàn)監(jiān)聽器的方法onClick來編寫具體業(yè)務(wù)邏輯代碼。在第二種方式種，使用lambda表達(dá)式寫法，setClickedListener的參數(shù)為函數(shù)，這種寫法相對簡潔，但前提是開發(fā)者需要知道組件監(jiān)聽器的回調(diào)方法的參數(shù)列表，如button的onClick方法只有一個(gè)參數(shù)Component，當(dāng)為其他組件添加監(jiān)聽器時(shí)，同樣推薦使用lambda的方式，為加強(qiáng)理解，下面再以ListContainer為例，為ListContainer的列表元素添加點(diǎn)擊事件：
- ListContainer newsListContainer = findComponentById(ResourceTable.Id_news_container);
- newsListContainer.setItemClickedListener((listContainer, component, i, l) -> {
- /*
- 開發(fā)人員可以自定義事件處理邏輯，如獲取組件、啟動(dòng)新的bility等
- */
- Text text = (Text) component.findComponentById(ResourceTable.Id_type_text);
- });
在上述的代碼片段中，setItemClickedListener同樣使用lambda表達(dá)式設(shè)置監(jiān)聽器，而如果使用普通方式，則如下代碼片段，需要實(shí)例化ListContainer.ItemClickedListener接口并且實(shí)現(xiàn)onItemClicked方法：
- ewsListContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
- @Override
- public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
- /*
- 開發(fā)人員可以自定義事件處理邏輯，如獲取組件、啟動(dòng)新的bility等
- */
- Text text = (Text) component.findComponentById(ResourceTable.Id_type_text);
- }
- });
細(xì)心的朋友可能會(huì)發(fā)現(xiàn)，在獲取Button組件時(shí)直接使用findComponentById方法，而獲取Text組件時(shí)是使用component.findComponentById方法，這兩種方式由何不同呢?其實(shí)在Component類中，定義了獲取指定組件的方法findComponentById;而在Ability類中也聲明了獲取組件的方法findComponentById，只不過Ability的findComponentById方法內(nèi)部依然通過調(diào)用Component類中的findComponentById來獲取組件。知道這兩種獲取組件的方法后，可以根據(jù)實(shí)際需要選擇合適的方式來獲取組件信息。
2. Component方法簡介
在Component類中定義了幾十種方法用于設(shè)置和獲取組件信息，方便開發(fā)人員創(chuàng)造自己應(yīng)用，這些方法大體可歸納如下幾類，處于篇幅原因不一一列舉：
1）設(shè)置和獲取組件布局信息，如位置、邊距等
（1) public int getBottom();Obtains the bottom edge position of a component relative to the parent layout.
（2) public int[] getMargins();Obtains the left, top, right, and bottom margins of this component.
（3) public int[] public int getPaddingLeft();Obtains the left padding of the component.
2）設(shè)置和獲取組件繪制屬性信息，如大小尺寸、邊角樣式、可見性等
（1) public int getHeight();獲取組件高度.
（2) public void setFocusBorderRadius(float[] radii);設(shè)置獲得焦點(diǎn)的邊框圓角
（3) public void setVisibility(int visibility);設(shè)置組件的可見性.
3）設(shè)置和獲取組件狀態(tài)信息，如焦點(diǎn)、是否可點(diǎn)擊、是否可用等
（1) public int getFocusable();獲取組件是否可以獲得焦點(diǎn)
（2) public void setClickable(boolean clickable);設(shè)置組件是否可以點(diǎn)擊.
（3) public void setEnabled(boolean enabled);設(shè)置組件是否可用
4）設(shè)值組件監(jiān)聽器以及上下文等信息
（1) public void setClickedListener(Component.ClickedListener listener);給組件設(shè)置點(diǎn)擊事件監(jiān)聽器
（2) public Context getContext();獲取由當(dāng)前組件持有的上下文信息
二、總結(jié)
在HarmonyOS應(yīng)用開發(fā)過程中，對組件的繼承體系以及組件所具有的能力有一個(gè)整體認(rèn)知是十分必要的，這樣在開發(fā)過程中可以做到心中有數(shù)，在學(xué)會(huì)一個(gè)組件的使用方式之后，也會(huì)順其自然的學(xué)會(huì)其他組件的使用，從而不必受到眾多組件的特性所困擾。在未來幾期文章中，會(huì)注意對Component的直接子類組件進(jìn)行講解。出于個(gè)人水平有限，如文章知識點(diǎn)有錯(cuò)誤或不當(dāng)之處，歡迎各位小伙伴積極指正并深入交流。微信公眾號：架構(gòu)派
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos.51cto.com/#zz
