一、AdaptiveBoxLayout 簡介

• AdaptiveBoxLayout 是自適應盒子布局，該布局提供了在不同屏幕尺寸設備上的自適應布局能力，主要用于相同級別的多個組件需要在不同屏幕尺寸設備上自動調整列數的場景。
• AdaptiveBoxLayout 布局中的每個子組件都用一個單獨的“盒子”裝起來，子組件設置的布局參數都是以盒子作為父布局生效，不以整個自適應布局為生效范圍。
• AdaptiveBoxLayout 布局中每個盒子的寬度固定為布局總寬度除以自適應得到的列數，高度為 match_content，每一行中的所有盒子按高度最高的進行對齊。
• AdaptiveBoxLayout 布局水平方向是自動分塊，因此水平方向不支持 match_content，布局水平寬度僅支持 match_parent 或固定寬度。
• 自適應僅在水平方向進行了自動分塊，縱向沒有做限制，因此如果某個子組件的高設置為 match_parent 類型，可能導致后續行無法顯示。
• AdaptiveBoxLayout 示意如下：

二、常用方法

• AdaptiveBoxLayout 常用方法列表：

方法功能

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

三、場景示例

• 在 AdaptiveBoxLayout 中添加和刪除自適應盒子布局規則的效果對比如下：

• 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"><Textohos:height="40vp"ohos:width="80vp"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="NO 1"ohos:text_size="18fp" /><Textohos:height="40vp"ohos:width="80vp"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="NO 2"ohos:text_size="18fp" /><Textohos:height="match_content"ohos:width="match_content"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:multiple_lines="true"ohos:text="AdaptiveBoxLayout, where a number of boxes with the same width but varied heights are laid out. The height of a row is determined by the highest box."ohos:text_size="18fp" /><Textohos:height="40vp"ohos:width="80vp"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="NO 4"ohos:text_size="18fp" /><Textohos:height="40vp"ohos:width="match_parent"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="Add"ohos:text_size="18fp" /><Textohos:height="40vp"ohos:width="80vp"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="NO 5"ohos:text_size="18fp" /><Textohos:height="160vp"ohos:width="80vp"ohos:background_element="#EC9DAA"ohos:margin="10vp"ohos:padding="10vp"ohos:text="NO 6"ohos:text_size="18fp" /></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="adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);"/><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="adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);"/></DirectionalLayout>

• Java 關鍵代碼：

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();}));

總結

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

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