AdaptiveBoxLayout 是什么

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

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

比如下面的是豎著的，現在想讓它變成橫著的，

添加規則之后可以變成橫著的

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

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

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

AdaptiveBoxLayout常用方法列表

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

?demo 練習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="添加規則"/><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="移除規則"/></DirectionalLayout>

布局的效果圖

java 代碼添加規則

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-> {// 添加規則adaptiveBoxLayout.addAdaptiveRule(100, 2000, 2);// 更新布局adaptiveBoxLayout.postLayout();}));findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {// 移除規則adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 2);// 更新布局adaptiveBoxLayout.postLayout();}));}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

實現的效果如下

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="添加規則"/><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="移除規則"/></DirectionalLayout>

xml 效果

java 代碼添加規則

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-> {// 添加規則adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);// 更新布局adaptiveBoxLayout.postLayout();}));findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {// 移除規則adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);// 更新布局adaptiveBoxLayout.postLayout();}));}@Overridepublic void onActive() {super.onActive();}@Overridepublic void onForeground(Intent intent) {super.onForeground(intent);}
}

具體效果圖如下

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

官方文檔參考鏈接

其他的布局

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

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

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

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

總結

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

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