建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)鴻蒙OS教程：鴻蒙OS 組件與布局代碼創(chuàng)建布局
開發(fā)如下圖所示界面，需要添加一個 Text 組件和 Button 組件。由于兩個組件從上到下依次居中排列，可以選擇使用豎向的 DirectionalLayout 布局來放置組件。
圖1 開發(fā)樣例圖
代碼創(chuàng)建布局需要分別創(chuàng)建組件和布局，并將它們進行組織關(guān)聯(lián)。
創(chuàng)建組件
- 聲明組件
Button button = new Button(context); // 參數(shù)context表示AbilitySlice的Context對象- 設(shè)置組件大小
button.setWidth(ComponentContainer.LayoutConfig.MATCH_CONTENT);
button.setHeight(ComponentContainer.LayoutConfig.MATCH_CONTENT);- 設(shè)置組件屬性及ID
button.setText("My name is Button.");
button.setTextSize(25);
button.setId(ID_BUTTON);創(chuàng)建布局并使用
- 聲明布局
DirectionalLayout directionalLayout = new DirectionalLayout(context);- 設(shè)置布局大小
directionalLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);
directionalLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);- 設(shè)置布局屬性及 ID
directionalLayout.setOrientation(Component.VERTICAL);- 將組件添加到布局中（視布局需要對組件設(shè)置布局屬性進行約束）
directionalLayout.addComponent(button);- 將布局添加到組件樹中
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 為組件添加對應布局的布局屬性
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);
// 類似的添加一個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
// 在組件中增加對點擊事件的檢測
public void onClick(Component Component) {
// 此處添加按鈕被點擊需要執(zhí)行的操作
}
});
directionalLayout.addComponent(button);
// 步驟5 將布局作為根布局添加到視圖樹中
super.setUIContent(directionalLayout);
}根據(jù)以上步驟創(chuàng)建組件和布局后的界面顯示效果如[圖1]所示。其中，代碼示例中為組件設(shè)置了一個按鍵回調(diào)，在按鍵被按下后，應用會執(zhí)行自定義的操作。
在代碼示例中，可以看到設(shè)置組件大小的方法有兩種：
- 通過 setWidth/setHeight 直接設(shè)置寬高。
- 通過 setLayoutConfig 方法設(shè)置布局屬性來設(shè)定寬高。
這兩種方法的區(qū)別是后者還可以增加更多的布局屬性設(shè)置，例如：使用“alignment”設(shè)置水平居中的約束。另外，這兩種方法設(shè)置的寬高以最后設(shè)置的作為最終結(jié)果。它們的取值一致，可以是以下取值：
- 具體以像素為單位的數(shù)值。
- MATCH_PARENT：表示組件大小將擴展為父組件允許的最大值，它將占據(jù)父組件方向上的剩余大小。
- MATCH_CONTENT：表示組件大小與它內(nèi)容占據(jù)的大小范圍相適應。
當前標題：創(chuàng)新互聯(lián)鴻蒙OS教程：鴻蒙OS 組件與布局代碼創(chuàng)建布局
網(wǎng)頁鏈接：http://fisionsoft.com.cn/article/djoeide.html
