HarmonyOS之常用布局DirectionalLayout的使用

一、DirectionalLayout

• DirectionalLayout 是 Java UI 中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。
• DirectionalLayout 示意如下：

二、支持的 XML 属性

• DirectionalLayout 的共有 XML 属性继承自 Component，详情请参考我之前的博客：HarmonyOS之组件通用的XML属性总览。
• DirectionalLayout 的自有 XML 属性见下表：

属性名称中文描述取值取值说明使用案例alignment对齐方式left表示左对齐可以设置取值项如表中所列，也可以使用“|”进行多项组合。
ohos:alignment="top|left"
ohos:alignment="left"top表示顶部对齐right表示右对齐bottom表示底部对齐horizontal_center表示水平居中对齐vertical_center表示垂直居中对齐center表示居中对齐start表示靠起始端对齐end表示靠结束端对齐total_weight所有子视图的权重之和float类型可以直接设置浮点数值，也可以引用float浮点数资源ohos:total_weight="2.5"
ohos:total_weight="$float:total_weight"orientation子布局排列方向horizontal表示水平方向布局ohos:orientation="horizontal"vertical表示垂直方向布局ohos:orientation="vertical"

• DirectionalLayout 所包含组件可支持的 XML 属性见下表：

属性名称中文描述取值取值说明使用案例layout_alignment对齐方式left表示左对齐可以设置取值项如表中所列，也可以使用“|”进行多项组合。
ohos:layout_alignment="top"
ohos:layout_alignment="top|left"top表示顶部对齐right表示右对齐bottom表示底部对齐horizontal_center表示水平居中对齐vertical_center表示垂直居中对齐center表示居中对齐weight比重float类型可以直接设置浮点数值，也可以引用float浮点数资源ohos:weight="1"
ohos:weight="$float:weight"

三、排列方式

• DirectionalLayout 的排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。
• 使用 orientation 设置布局内组件的排列方式，默认为垂直排列。

① 垂直排列

• 垂直方向排列三个按钮，效果如下：

• 示例代码如下：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

② 水平排列

• 水平方向排列三个按钮，效果如下：

• 示例代码：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• DirectionalLayout 不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示，例如：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• 此布局包含了三个按钮，但由于 DirectionalLayout 不会自动换行，超出布局大小的组件部分无法显示。界面显示如下：

四、对齐方式

• DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效，如设置了水平方向的排列方式，则左对齐、右对齐将不会生效。
• 三种对齐方式的示例代码：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• 三种对齐方式效果示例：

五、权重

• 权重（weight）就是按比例来分配组件占用父组件的大小，在水平布局下计算公式为：
  父布局可分配宽度=父布局宽度-所有子组件 width 之和；
  组件宽度=组件 weight /所有组件 weight 之和*父布局可分配宽度；
• 实际使用过程中，建议使用 width=0 来按比例分配父布局的宽度，1:1:1效果如下：

• 示例代码：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#878787"/></shape>

六、场景示例

• 源码示例：

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_parent"ohos:background_element="$graphic:color_light_gray_element"><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout> </DirectionalLayout>

总结

以上是生活随笔为你收集整理的HarmonyOS之常用布局DirectionalLayout的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。