![Hello HarmonyOS!:鸿蒙应用开发从入门到精通](https://wfqqreader-1252317822.image.myqcloud.com/cover/437/43738437/b_43738437.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.2.6 AdaptiveBoxLayout
AdaptiveBoxLayout 是自适应盒子布局,可以根据所盛放的组件大小进行自适应,使用起来非常灵活,在一定程度上可以用于解决不同尺寸、不同分辨率设备上的页面适配问题。不同的设备由于尺寸、分辨率不同,如果使用同一套布局往往会产生意想不到的效果。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_117_2.jpg?sign=1739296950-30UPXD7sUQqgyCmt8WC5Dad8J75GxyhD-0-3c17bc6a91482443b085118d3b384801)
图2-29 PositionLayout的示例
下面实现一个 AdaptiveBoxLayout,分别在电视和手机上进行显示。
<?xml version="1.0" encoding="utf-8"?>
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_118_1.jpg?sign=1739296950-wpe49YIskRq7ybmYDL19oqBSMv08TLth-0-7cc6c101786bf9c2f1d1710ff29c08ac)
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_119_1.jpg?sign=1739296950-hEm1bBwOqYBHlUwCDlTGNUl1yg2E2v70-0-6e41b441473ab13237c52b42d73993ac)
在电视和手机上的预览效果如图2-30所示。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_119_2.jpg?sign=1739296950-P8NFYI0WOxTMEie5Rz4jw5HMVtcTArv6-0-d8c50e00aa1453723c1bb4708cb87e49)
图2-30 自适应盒子布局在不同设备上的显示效果
从图2-30中可以看到,对于不同尺寸的屏幕,AdaptiveBoxLayout在水平方向上的显示变得不同,在水平方向屏幕比较宽的电视上,自适应盒子布局变成了两列,而在水平方向屏幕比较窄的手机上,则显示为1列。
在不同尺寸的屏幕上,水平方向有多少个盒子是由 AdaptiveBoxLayout 自动计算得到的。在布局中,每个盒子的宽度固定由布局总宽度除以列数得到。因为盒子的宽度是自动计算得到的,所以组件的宽度不支持match_content,但支持match_parent,即计算出来的盒子的宽度。计算规则可以自己来设定。
实现自适应盒子布局的Java代码如下。
![](https://epubservercos.yuewen.com/0FFABF/23020655009774306/epubprivate/OEBPS/Images/42868_120_1.jpg?sign=1739296950-LA6L4xlQMjzjbQa2zlYY7X4fMkk7d4xC-0-7b21bea2ad4596ebf5d917771d3cba5a)