2. ArkTS 常见布局

Posted by DH on October 28, 2024

常见布局

ArkTS常见布局有4种:Column、row、stack、flex,在NEXT发布后,新增了一种相对布局RelativeContainer布局

控件共有属性

对于每个控件,除了特殊的属性,还有部分属性是所有控件所共有的:

(1) widht:控件宽度;

(2)height:控件高度;

(3)margin:外边距,和父布局的距离;

(4)padding:内补丁,内容距离控件边缘的距离;

(5)border:边框

还有一些通用的如背景色不再赘述。

Column

列布局,从上往下的布局。

主轴:沿布局方向的轴;

交叉轴:垂直于布局方向的轴;

有两个需要注意的属性:

(1)space:子控件的间距,设置之后,每个子控件都相隔一定距离;

(2)reverse:子控件在主轴上是否反转;

最重要的两个属性:

(1)alignItems:沿着交叉轴的子控件排布,包含Start(靠左):

Center(居中):

End(靠右):

(2)justifyContent:主轴上的子控件排布

包含Start(顶部):

Center(居中):

End(底部):

SpaceBetween(首尾顶格,然后均分):

SpaceAround(第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半,然后均分)

SpaceEvenly(相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。然后均分)

row

行布局,和列布局类似,只是主轴和交叉轴相反,不再赘述

stack

堆叠布局或层叠布局,子控件依次入栈,后入栈的子控件位于先入栈的子控件上面,叠在一起。

子控件的排列:

还有一个参数需要注意:zIndex属性。zIndex值越大,显示层级越高,zIndex值大的组件会覆盖在zIndex值小的组件上方。

flex

弹性布局,弹性布局能不用就不用,存在多次测量,性能不是很好。

可以参考华为官网:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-flex-layout-V5

RelativeContainer

用户解决布局嵌套问题,减少布局的层级,提高性能。有两个概念需要明确:

(1)锚点:通过锚点设置当前元素基于哪个元素确定位置。

(2)对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。

以父控件作为锚点为例:

其中,__container__表示父控件,如果是以子控件为锚点,需要给子控件设置id: