一、組件與布局

• HarmonyOS 提供了Ability 和 AbilitySlice 兩個基礎類，一個有界面的 Ability 可以由一個或多個 AbilitySlice 構成，AbilitySlice 主要用于承載單個頁面的具體邏輯實現和界面 UI，是應用顯示、運行和跳轉的最小單元。
• AbilitySlice 通過 setUIContent 為界面設置布局。
• AbilitySlice 的 UI 接口：

接口聲明接口描述

setUIContent(ComponentContainer root)	設置界面入口，root為界面組件樹根節點

• 組件需要進行組合，并添加到界面的布局中。在 Java UI 框架中，提供了兩種編寫布局的方式：
• • 在代碼中創建布局：用代碼創建 Component 和 ComponentContainer 對象，為這些對象設置合適的布局參數和屬性值，并將 Component 添加到 ComponentContainer 中，從而創建出完整界面。
• • 在 XML 中聲明 UI 布局：按層級結構來描述 Component 和 ComponentContainer 的關系，給組件節點設定合適的布局參數和屬性值，代碼中可直接加載生成此布局。
• 這兩種方式創建出的布局沒有本質差別，在 XML 中聲明布局，在加載后同樣可在代碼中對該布局進行修改。

二、組件分類

• 根據組件的功能，可以將組件分為布局類、顯示類、交互類三類，如下表所示：

組件類別組件名稱功能描述

布局類	PositionLayout、DirectionalLayout、StackLayout、DependentLayout、TableLayout、AdaptiveBoxLayout	提供了不同布局規范的組件容器，例如以單一方向排列的DirectionalLayout、以相對位置排列的DependentLayout、以確切位置排列的PositionLayout等
顯示類	Text、Image、Clock、TickTimer、ProgressBar	提供了單純的內容顯示，例如用于文本顯示的Text，用于圖像顯示的Image等
交互類	TextField、Button、Checkbox、RadioButton/RadioContainer、Switch、ToggleButton、Slider、Rating、ScrollView、TabList、ListContainer、PageSlider、PageFlipper、PageSliderIndicator、Picker、TimePicker、DatePicker、SurfaceProvider、ComponentProvider	提供了具體場景下與用戶交互響應的功能，例如Button提供了點擊響應功能，Slider提供了進度選擇功能等

三、代碼創建布局

① 創建組件

• 開發如下圖所示界面，需要添加一個 Text 組件和 Button 組件。由于兩個組件從上到下依次居中排列，可以選擇使用豎向的 DirectionalLayout 布局來放置組件。
• 代碼創建布局需要在 AbilitySlice 中分別創建組件和布局，并將它們進行組織關聯。
• 創建如下組件：

• 聲明組件：

Button button = new Button(getContext());

• 設置組件大小：

button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);

• 設置組件屬性：

button.setText("My name is Button.");button.setTextSize(50);

② 創建布局并使用

• 聲明布局：

DirectionalLayout directionalLayout = new DirectionalLayout(getContext());

• 設置布局大小：

directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);

• 設置布局屬性：

directionalLayout.setOrientation(Component.VERTICAL);

• 將組件添加到布局中（視布局需要對組件設置布局屬性進行約束）：

directionalLayout.addComponent(button);

• 將布局添加到組件樹中：

setUIContent(directionalLayout);

③ 示例代碼

• 示例代碼如下：

public class ExampleAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);// 聲明布局DirectionalLayout directionalLayout = new DirectionalLayout(getContext());// 設置布局大小directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);// 設置布局屬性directionalLayout.setOrientation(Component.VERTICAL);directionalLayout.setPadding(32, 32, 32, 32);Text text = new Text(getContext());text.setText("My name is Text.");text.setTextSize(50);text.setId(100);// 為組件添加對應布局的布局屬性DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_CONTENT, ComponentContainer.LayoutConfig.MATCH_CONTENT);layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;text.setLayoutConfig(layoutConfig);// 將Text添加到布局中directionalLayout.addComponent(text);// 類似的添加一個ButtonButton button = new Button(getContext());layoutConfig.setMargins(0, 50, 0, 0);button.setLayoutConfig(layoutConfig);button.setText("My name is Button.");button.setTextSize(50);ShapeElement background = new ShapeElement();background.setRgbColor(new RgbColor(0, 125, 255));background.setCornerRadius(25);button.setBackground(background);button.setPadding(10, 10, 10, 10);button.setClickedListener(new Component.ClickedListener() {@Override// 在組件中增加對點擊事件的檢測public void onClick(Component component) {// 此處添加按鈕被點擊需要執行的操作}});directionalLayout.addComponent(button);// 將布局作為根布局添加到視圖樹中super.setUIContent(directionalLayout);}}

• 根據以上步驟創建組件和布局后的界面顯示就可以實現上圖中的效果。其中，代碼示例中為組件設置了一個按鍵回調，在按鍵被按下后，應用會執行自定義的操作。
• 在代碼示例中，可以看到設置組件大小的方法有兩種：
• • 通過 setWidth/setHeight 直接設置寬高。
• • 通過 setLayoutConfig 方法設置布局屬性來設定寬高。
• 這兩種方法的區別是后者還可以增加更多的布局屬性設置，例如：使用“alignment”設置水平居中的約束。另外，這兩種方法設置的寬高以最后設置的作為最終結果。它們的取值一致，可以是以下取值：
• • 具體以像素為單位的數值。
• • MATCH_PARENT：表示組件大小將擴展為父組件允許的最大值，它將占據父組件方向上的剩余大小。
• • MATCH_CONTENT：表示組件大小與它內容占據的大小范圍相適應。

四、XML 創建布局

① XML 布局

• XML 聲明布局的方式更加簡便直觀。每一個 Component 和 ComponentContainer 對象大部分屬性都支持在 XML 中進行設置，它們都有各自的XML屬性列表。某些屬性僅適用于特定的組件，例如：只有 Text 支持“text_color”屬性，但不支持該屬性的組件，如果添加了該屬性，該屬性則會被忽略。具有繼承關系的組件子類將繼承父類的屬性列表，Component 作為組件的基類，擁有各個組件常用的屬性，比如：ID、布局參數等。

ohos:id="$+id:text"

• 在 XML 中使用此格式聲明一個對開發者友好的 ID，它會在編譯過程中轉換成一個常量。尤其在 DependentLayout 布局中，組件之間需要描述相對位置關系，描述時要通過 ID 來指定對應組件。
• 布局中的組件通常要設置獨立的 ID，以便在程序中查找該組件。如果布局中有不同組件設置了相同的 ID，在通過 ID 查找組件時會返回查找到的第一個組件，因此盡量保證在所要查找的布局中為組件設置獨立的 ID 值，避免出現與預期不符合的問題。
• 布局參數：

ohos:width="20vp"ohos:height="10vp"

• 與代碼中設置組件的寬度和高度類似，在 XML 中它們的取值可以是：
• • 具體的數值：10（以像素為單位）、10vp（以屏幕相對像素為單位）。
• • match_parent：表示組件大小將擴展為父組件允許的最大值，它將占據父組件方向上的剩余大小。
• • match_content：表示組件大小與它的內容占據的大小范圍相適應。

② 創建 XML 布局文件

• 在 DevEco Studio 的“Project”窗口，打開“entry > src > main > resources > base”，右鍵點擊“layout”文件夾，選擇“New > Layout Resource File”，命名為“first_layout”。

• 打開新創建的 first_layout.xml 布局文件，修改其中的內容，對布局和組件的屬性和層級進行描述。

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_parent"ohos:orientation="vertical"ohos:padding="32"><Textohos:id="$+id:text"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="horizontal_center"ohos:text="My name is Text."ohos:text_size="25fp"/><Buttonohos:id="$+id:button"ohos:margin="50"ohos:width="match_content"ohos:height="match_content"ohos:layout_alignment="horizontal_center"ohos:text="My name is Button."ohos:text_size="50"/></DirectionalLayout>

③ 加載 XML 布局

• 在代碼中需要加載 XML 布局，并添加為根布局或作為其他布局的子 Component。

package com.example.myapplication.slice;import com.example.myapplication.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.colors.RgbColor;import ohos.agp.components.*;import ohos.agp.components.element.ShapeElement;public class ExampleAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);// 加載XML布局作為根布局super.setUIContent(ResourceTable.Layout_first_layout);Button button = (Button) findComponentById(ResourceTable.Id_button);if (button != null) {// 設置組件的屬性ShapeElement background = new ShapeElement();background.setRgbColor(new RgbColor(0, 125, 255));background.setCornerRadius(25);button.setBackground(background);button.setClickedListener(new Component.ClickedListener() {@Override// 在組件中增加對點擊事件的檢測public void onClick(Component component) {// 此處添加按鈕被點擊需要執行的操作}});}}}

總結

以上是生活随笔為你收集整理的HarmonyOS之组件布局的创建和使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。