ArkUI组件布局模型

ArkUI组件布局模型:

ArkUI布局模型.png

UI组件区域主要分为:

组件区域(蓝区方块):组件区域表明组件的大小,组件width、height属性就是设置该区域的大小;
组件内容区(黄色方块):组件区域大小减去组件的Padding值,组件内容区大小会作为组件内容(或者子组件)进行大小测算时的布局测算限制;
组件内容(绿色方块):组件内容本身占用的大小,比如文本内容占用的大小,组件内容和组件内容区不一定匹配(比如设置了固定的width和height,此时组件内容区大小就是设置的width和height减去padding值,但文本内容则是通过文本布局引擎测算后得到的大小,可能出现文本真实大小小于设置的组件内容区大小),当组件内容和组件内容区大小不一致时,会生效组件的align属性(定义组件内容在组件内容区的对齐方式,如居中对齐)。
组件布局边界(虚线部分):组件通过margin属性设置外边距时,组件布局边界就是组件区域加上Margin的大小。

组件的宽高、padding、margin等局可以通过ArkUI-apis 尺寸设置来设置

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容