AdaptiveBoxLayout 是什么

AdaptiveBoxLayout 是自適應(yīng)盒子布局，該布局提供了在不同屏幕尺寸設(shè)備上的自適應(yīng)布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設(shè)備上自動調(diào)整列數(shù)的場景?

個人感覺這個比較有意思的布局，不過感覺常用的還是DirectionalLayout和DependentLayout

比如下面的是豎著的，現(xiàn)在想讓它變成橫著的，

添加規(guī)則之后可以變成橫著的

這個下面會用代碼寫一下，想看下AdaptiveBoxLayout 的屬性把

下面是使用AdaptiveBoxLayout 需要注意的幾點

1. 該布局中的每個子組件都用一個單獨(dú)的“盒子”裝起來，子組件設(shè)置的布局參數(shù)都是以盒子作為父布局生效，不以整個自適應(yīng)布局為生效范圍。
2. 該布局中每個盒子的寬度固定為布局總寬度除以自適應(yīng)得到的列數(shù)，高度為match_content，每一行中的所有盒子按高度最高的進(jìn)行對齊。
3. 該布局水平方向是自動分塊，因此水平方向不支持match_content，布局水平寬度僅支持match_parent或固定寬度。
4. 自適應(yīng)僅在水平方向進(jìn)行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設(shè)置為match_parent類型，可能導(dǎo)致后續(xù)行無法顯示

AdaptiveBoxLayout常用方法列表

方法	功能
addAdaptiveRule(int minWidth, int maxWidth, int columns)	添加一個自適應(yīng)盒子布局規(guī)則。
removeAdaptiveRule(int minWidth, int maxWidth, int columns)	移除一個自適應(yīng)盒子布局規(guī)則。
clearAdaptiveRules()	移除所有自適應(yīng)盒子布局規(guī)則。

?demo 練習(xí)AdaptiveBoxLayout 的使用

demo1 豎著的布局變成兩派兩列

xml 代碼如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><AdaptiveBoxLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="0vp"ohos:width="match_parent"ohos:weight="1"ohos:id="$+id:adaptive_box_layout"><Buttonohos:id="$+id:button1"ohos:height="50vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#00FFFF"ohos:text="HarmonyOS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="50vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#FF0000"ohos:text="HarmonyOS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="50vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/><Buttonohos:id="$+id:button4"ohos:height="50vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/></AdaptiveBoxLayout><Buttonohos:id="$+id:add_rule_btn"ohos:layout_alignment="horizontal_center"ohos:top_margin="10vp"ohos:padding="10vp"ohos:background_element="#A9CFF0"ohos:height="match_content"ohos:width="match_content"ohos:text_size="22fp"ohos:text="添加規(guī)則"/><Buttonohos:id="$+id:remove_rule_btn"ohos:padding="10vp"ohos:top_margin="10vp"ohos:layout_alignment="horizontal_center"ohos:bottom_margin="10vp"ohos:background_element="#D5D5D5"ohos:height="match_content"ohos:width="match_content"ohos:text_size="22fp"ohos:text="移除規(guī)則"/></DirectionalLayout>

布局的效果圖

java 代碼添加規(guī)則

package com.example.myapplication.slice;import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AdaptiveBoxLayout;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {// 添加規(guī)則adaptiveBoxLayout.addAdaptiveRule(100, 2000, 2);// 更新布局adaptiveBoxLayout.postLayout();}));findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {// 移除規(guī)則adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 2);// 更新布局adaptiveBoxLayout.postLayout();}));}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

實現(xiàn)的效果如下

demo2 把一排布局變成一排三列

xml 代碼

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><AdaptiveBoxLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="0vp"ohos:width="match_parent"ohos:weight="1"ohos:id="$+id:adaptive_box_layout"><Buttonohos:id="$+id:button1"ohos:height="50vp"ohos:width="80vp"ohos:top_margin="10vp"ohos:background_element="#00FFFF"ohos:text="java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="50vp"ohos:width="80vp"ohos:top_margin="10vp"ohos:background_element="#FF0000"ohos:text="java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="50vp"ohos:width="80vp"ohos:top_margin="10vp"ohos:background_element="#00d8a0"ohos:text="java"ohos:text_size="20fp"/></AdaptiveBoxLayout><Buttonohos:id="$+id:add_rule_btn"ohos:layout_alignment="horizontal_center"ohos:top_margin="10vp"ohos:padding="10vp"ohos:background_element="#A9CFF0"ohos:height="match_content"ohos:width="match_content"ohos:text_size="22fp"ohos:text="添加規(guī)則"/><Buttonohos:id="$+id:remove_rule_btn"ohos:padding="10vp"ohos:top_margin="10vp"ohos:layout_alignment="horizontal_center"ohos:bottom_margin="10vp"ohos:background_element="#D5D5D5"ohos:height="match_content"ohos:width="match_content"ohos:text_size="22fp"ohos:text="移除規(guī)則"/></DirectionalLayout>

xml 效果

java 代碼添加規(guī)則

package com.example.myapplication.slice;import com.example.myapplication.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AdaptiveBoxLayout;public class MainAbilitySlice extends AbilitySlice {@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {// 添加規(guī)則adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);// 更新布局adaptiveBoxLayout.postLayout();}));findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {// 移除規(guī)則adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);// 更新布局adaptiveBoxLayout.postLayout();}));}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

具體效果圖如下

特別注意：添加規(guī)則和移除規(guī)則的columns 要相同否則沒有效果會是移除沒有效果，具體的位置如下圖

官方文檔參考鏈接

其他的布局

HarmonyOS UI開發(fā) DirectionalLayout(定向布局) 的使用
HarmonyOS UI開發(fā) DependentLayout(依賴布局) 的使用

HarmonyOS UI開發(fā) StackLayout(堆棧布局) 的使用

HarmonyOS UI開發(fā) PositionLayout(位置布局) 的使用

HarmonyOS UI開發(fā) TableLayout(表格布局) 的使用

總結(jié)

以上是生活随笔為你收集整理的HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。