DirectionalLayout布局

首先贴出来官方的文档。

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布局分为两种模式vertical垂直排列(竖着)子元素，horizontal(横着)水平排列子元素。

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

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

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

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

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

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

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

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

上图是垂直+weight分配。

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

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