概述

Adaptive译为适应的，合适的。所以，AdaptiveBoxLayout可以译为自适应盒子布局。该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。

在介绍AdaptiveBoxLayout布局使用前，我们需要注意以下4点内容（*）：

该布局中的每个子组件都用一个单独的“盒子”装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。
该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。
该布局水平方向是自动分块，因此水平方向不支持match_content，布局水平宽度仅支持match_parent或固定宽度。
自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。

AdaptiveBoxLayout示意图

从该示意图中可以看出，AdaptiveBoxLayout中的子组件都用一个“盒子”装起来，并且子组件的布局参数是以盒子作为父布局，而不是自适应布局本身。而且每一行的高度都是以最高的那个子组件作为对齐的。

AdaptiveBoxLayout的使用

1、AdaptiveBoxLayout布局常用方法

方法	功能
addAdaptiveRule(int minWidth, int maxWidth, int columns)	添加一个自适应盒子布局规则。
removeAdaptiveRule(int minWidth, int maxWidth, int columns)	移除一个自适应盒子布局规则。
clearAdaptiveRules()	移除所有自适应盒子布局规则。

其中需要注意的是，AdaptiveBoxLayout布局默认是单列显示的。除非添加了自适应盒子布局规则。在添加布局规则时，需要注意maxWidth必须是大于屏幕宽度尺寸的，不然不起作用。例如你的手机屏幕大小为1080x1920，maxWidth取值<=1080，那么只显示单列排列方式，取值>1080才会使我们添加的自适应布局生效。

2、实战

案例效果：

点击添加自适应布局后

代码实现如下：

XML属性：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <AdaptiveBoxLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:weight="1"
        ohos:id="$+id:adaptive_box_layout">

        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text_alignment="center"
            ohos:text="NO 1"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text_alignment="center"
            ohos:text="NO 2"
            ohos:text_size="18fp" />
        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text_alignment="center"
            ohos:text="NO 3"
            ohos:text_size="18fp" />
    </AdaptiveBoxLayout>

    <Button
        ohos: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="addAdaptiveRule"/>

    <Button
        ohos: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="removeAdaptiveRule"/>

</DirectionalLayout>

Java代码：
    private void testAdaptiveBoxLayout(){
        AdaptiveBoxLayout layout = (AdaptiveBoxLayout) findComponentById(ResourceTable.Id_adaptive_box_layout);
        findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((view->{
            //添加规则
            layout.addAdaptiveRule(50,1081,2);
            //刷新布局
            layout.postLayout();
        }));
        findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component ->{
            //清空规则
            layout.clearAdaptiveRules();
            //刷新布局
            layout.postLayout();
        }));
    }

在上面的例子中，我使用的手机屏幕大小为1080x2340，在添加自适应布局规则时设置maxWidth为1081即可达到适配效果（取值>1080都可以）。如果取值<=1080，就没有适配效果。并且需要注意的是，我们同时添加多个布局规则，只有第一个规则会生效。在实际开发中，我们可以获取屏幕的宽度，然后再决定我们要自适应的列数，从而实现自适应的效果。

3、小结

在本章中，我们学习了AdaptiveBoxLayout的使用，我们使用addAdaptiveRule()方法来为布局添加自适应规则，使用removeAdaptiveRule()或clearAdaptiveRules()来移除布局规则。同时也学习了使用AdaptiveBoxLayout时，需要注意的四个重要的知识点，大家可以返回到概述那边回顾一下。

思考总结

AdaptiveBoxLayout的概念是什么？在开发中需要注意什么？
AdaptiveBoxLayout常用的方法有哪些？maxWidth参数取值需要注意什么？

鸿蒙AdaptiveBoxLayout布局开发

概述