鴻蒙OS 組件與布局代碼創(chuàng)建布局

開發(fā)如下圖所示界面，需要添加一個(gè) Text 組件和 Button 組件。由于兩個(gè)組件從上到下依次居中排列，可以選擇使用豎向的 DirectionalLayout 布局來(lái)放置組件。

圖1 開發(fā)樣例圖

代碼創(chuàng)建布局需要分別創(chuàng)建組件和布局，并將它們進(jìn)行組織關(guān)聯(lián)。

創(chuàng)建組件

1. 聲明組件

   Button button = new Button(context); // 參數(shù)context表示AbilitySlice的Context對(duì)象

1. 設(shè)置組件大小

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

1. 設(shè)置組件屬性及ID

   button.setText("My name is Button.");
   button.setTextSize(25);
   button.setId(ID_BUTTON);

創(chuàng)建布局并使用

1. 聲明布局

   DirectionalLayout directionalLayout = new DirectionalLayout(context);

1. 設(shè)置布局大小

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

1. 設(shè)置布局屬性及 ID

   directionalLayout.setOrientation(Component.VERTICAL);

1. 將組件添加到布局中（視布局需要對(duì)組件設(shè)置布局屬性進(jìn)行約束）

   directionalLayout.addComponent(button);

1. 將布局添加到組件樹中

   setUIContent(directionalLayout);

完整代碼示例：

@Override
public void onStart(Intent intent) {
    super.onStart(intent);
    // 步驟1 聲明布局
    DirectionalLayout directionalLayout = new DirectionalLayout(context);
    // 步驟2 設(shè)置布局大小
    directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
    directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);
    // 步驟3 設(shè)置布局屬性及ID（ID視需要設(shè)置即可）
    directionalLayout.setOrientation(Component.VERTICAL);
    directionalLayout.setPadding(32, 32, 32, 32);

 
    Text text = new Text(context);
    text.setText("My name is Text.");
    text.setTextSize(50);
    text.setId(100);
    // 步驟4.1 為組件添加對(duì)應(yīng)布局的布局屬性
    DirectionalLayout.LayoutConfig layoutConfig = new DirectionalLayout.LayoutConfig(LayoutConfig.MATCH_CONTENT,
        LayoutConfig.MATCH_CONTENT);
    layoutConfig.alignment = LayoutAlignment.HORIZONTAL_CENTER;
    text.setLayoutConfig(layoutConfig);

 
    // 步驟4.2 將Text添加到布局中
    directionalLayout.addComponent(text);

 
    // 類似的添加一個(gè)Button
    Button button = new Button(context);
    layoutConfig.setMargins(0, 50, 0, 0);
    button.setLayoutConfig(layoutConfig);
    button.setText("My name is Button.");
    button.setTextSize(50);
    button.setId(100);
    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
        // 在組件中增加對(duì)點(diǎn)擊事件的檢測(cè)
        public void onClick(Component Component) {
            // 此處添加按鈕被點(diǎn)擊需要執(zhí)行的操作
        }
    });
    directionalLayout.addComponent(button);

 
    // 步驟5 將布局作為根布局添加到視圖樹中
    super.setUIContent(directionalLayout);
}

根據(jù)以上步驟創(chuàng)建組件和布局后的界面顯示效果如[圖1]所示。其中，代碼示例中為組件設(shè)置了一個(gè)按鍵回調(diào)，在按鍵被按下后，應(yīng)用會(huì)執(zhí)行自定義的操作。

在代碼示例中，可以看到設(shè)置組件大小的方法有兩種：

• 通過(guò) setWidth/setHeight 直接設(shè)置寬高。
• 通過(guò) setLayoutConfig 方法設(shè)置布局屬性來(lái)設(shè)定寬高。

這兩種方法的區(qū)別是后者還可以增加更多的布局屬性設(shè)置，例如：使用“alignment”設(shè)置水平居中的約束。另外，這兩種方法設(shè)置的寬高以最后設(shè)置的作為最終結(jié)果。它們的取值一致，可以是以下取值：

• 具體以像素為單位的數(shù)值。
• MATCH_PARENT：表示組件大小將擴(kuò)展為父組件允許的最大值，它將占據(jù)父組件方向上的剩余大小。
• MATCH_CONTENT：表示組件大小與它內(nèi)容占據(jù)的大小范圍相適應(yīng)。