春节不停更，此文正在参加「星光计划-春节更帖活动」 作者：肖瑜博
1. 前言
DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。
2. 属性
| 可取值 | 作用 | |
|---|---|---|
| width | match_parent | 宽度与父视图相等 |
| match_content | 宽度等于内容所需要的宽度 | |
| 具体数值：30vp等 | 指定宽度为30vp | |
| height | match_parent | 高度与父视图相等 |
| match_content | 高度等于内容所需要的宽度 | |
| 具体数值：30vp等 | 指定高度为30vp | |
| orientation | horizontal | 子视图水平排列 |
| vertical | 子视图竖直排列 | |
| background_element | 具体某个xml文件，如：$graphic:color_gray_element | 按照color_gray_element.xml文件设置布局样式 |
| 具体的颜色名称，如：red | 设置背景颜色，例子中设置为红色 | |
| 设置颜色值，如：#000000 | 设置背景颜色，例子中设置为黑色 | |
| alignment | center | 所有子视图居中对齐 |
| left | 所有子视图左对齐 | |
| top | 所有子视图上对齐 | |
| right | 所有子视图右对齐 | |
| bottom | 所有子视图底部对齐 | |
| right | bottom所有子视图按右下角对齐 | |
| total_weight | 具体数值，整数或浮点数，如：2.5 | 所有子视图的权重之和为2.5 |
| layout_alignment | left | 左对齐 |
| top | 上对齐 | |
| right | 右对齐 | |
| bottom | 下对齐 | |
| horizontal_center | 水平方向居中 | |
| vertical_center | 垂直方向居中 | |
| center | 水平和垂直方向都居中 | |
| weight | width=”0vp”,weight=”1” | 组件在宽度上占的权重为1 |
| height=”0vp”,weight=”1” | 组件在高度上占的权重为1 |
3. 效果展示
纯DirectionLayout实现如下“爱心”效果：
如上图所示，我们先对这颗爱心进行简单的分析！这是我们用16个正方形的方块拼成的爱心，其中最顶部有2颗方块，然后往下是4颗、3颗、2颗。。。到底部只有1颗。这就可以使用我们的垂直布局实现。然后每一行我们都可以使用水平布局，然后再配合使用left_margin，使每个一小方块都有水平间距，就能实现我们的爱心了！最后把第一行的2个小方块使用top_margin距离顶部一定的距离，就能把爱心居中显示了！具体代码如下：
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="top"
ohos:orientation="vertical"
>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:top_margin="150vp">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="80vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="120vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="120vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="120vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="200vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="80vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="120vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="120vp"/>
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="40vp"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="40vp"
ohos:width="match_parent"
ohos:orientation="horizontal">
<Text
ohos:height="40vp"
ohos:width="40vp"
ohos:background_element="red"
ohos:left_margin="160vp"/>
</DirectionalLayout>
</DirectionalLayout>
更多原创内容请关注：中软国际 HarmonyOS 技术团队
入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。
https://harmonyos.51cto.com/#bkwz
::: hljs-center
:::
