DirectionalLayout布局

发布于 2020-10-27 17:00
浏览
2收藏

首先贴出来官方的文档。

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-directionallayout-0000001050769565

视频课程推荐 https://edu.51cto.com/center/course/lesson/index?id=642685

贴出来我的demo截图,忽略屏幕上边或者右边的空白这是远程设备的BUG。

DirectionalLayout布局-开源基础软件社区

DirectionalLayout布局分为两种模式vertical垂直排列(竖着)子元素,horizontal(横着)水平排列子元素。

如果是垂直排列子元素height的总和超过父元素后则会被截取,如果是水平排列子元素width的总和超过父元素后则会被截取。

DirectionalLayout布局-开源基础软件社区

垂直排列每个元素的width是占据父类的全部width,height是200vp可以看到第三个只显示了一点点。

DirectionalLayout布局-开源基础软件社区

水平排列每个元素的height是占据父类的全部height,width每个是400vp可以看到第三个只显示了一点点。

使用权重分配元素占据大小。三个Text都没有设置width而是按照weight2:1:1分配。

DirectionalLayout布局-开源基础软件社区

以水平排列来说,如果三个元素中的一个元素设置了width会发生什么?

DirectionalLayout布局-开源基础软件社区

父布局可分配宽度=父布局宽度-所有子组件width之和;(设父布局整体有1000,Text1占用了900vp,父布局就只剩下了100)

组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;(Text2和Text3的权重分别是1-> 1/2*100 每个元素的width就是100)

简单说,总空间-已经分配的空间剩下,才可以用于weight分配。

DirectionalLayout布局-开源基础软件社区

上图是垂直+weight分配。

layout_alignment指定当前元素在DirectionalLayout的位置。如果当前模式是垂直意味着每个元素占据一行,哪怕当前元素的width只有一点点它也占据一行,这意味着我们可以设置元素在行里的位置。三个可选值left right horizontal_center(center)下图是垂直布局使用layout_alignment属性。

DirectionalLayout布局-开源基础软件社区

DirectionalLayout水平布局时每个元素独占一列无论该元素的height有多大。这意味着我们可以设置元素在列中的位置三个可选值 top  bottom vertical_center(center)下图是书评布局时三个元素的位置。

DirectionalLayout布局-开源基础软件社区

 

已于2020-10-27 17:00:46修改
1
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐