devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用

作者：你好赵伟 | 2024-03-20 04:14:06

赞

踩

directionallayout(定向布局)

DirectionalLayout 是什么

DirectionalLayout 是定向布局，控件水平或垂直排列(类似Android 的线性布局不过还是有区别的)

DirectionalLayout的自有XML属性

属性名称

中文描述

取值

取值说明

使用案例

alignment

对齐方式

left

表示左对齐。

可以设置取值项如表中所列，也可以使用“|”进行多项组合。

ohos:alignment="top|left"

ohos:alignment="left"

top

表示顶部对齐。

right

表示右对齐。

bottom

表示底部对齐。

horizontal_center

表示水平居中对齐。

vertical_center

表示垂直居中对齐。

center

表示居中对齐。

start

表示靠起始端对齐。

end

表示靠结束端对齐。

orientation

子布局排列方向

horizontal

表示水平方向布局。

ohos:orientation="horizontal"

vertical

表示垂直方向布局。

ohos:orientation="vertical"

total_weight

所有子视图的权重之和

float类型

可以直接设置浮点数值，也可以引用float浮点数资源。

ohos:total_weight="2.5"

ohos:total_weight="$float:total_weight"

DirectionalLayout 自有属性 alignment

1 底部对齐

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="bottom"
  7.     ohos:orientation="vertical">
  8.  
  9.     <Button
  10.         ohos:id="$+id:button1"
  11.         ohos:height="60vp"
  12.         ohos:width="100vp"
  13.         ohos:background_element="#00d8a0"
  14.         ohos:text="Java"
  15.         ohos:text_size="20fp"/>
  16.  
  17. </DirectionalLayout>

效果图

2 右边对齐

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="right"
  7.     ohos:orientation="vertical">
  8.  
  9.     <Button
  10.         ohos:id="$+id:button1"
  11.         ohos:height="60vp"
  12.         ohos:width="100vp"
  13.         ohos:background_element="#00d8a0"
  14.         ohos:text="Java"
  15.         ohos:text_size="20fp"/>
  16.  
  17. </DirectionalLayout>

效果图

3 居中

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="center"
  7.     ohos:orientation="vertical">
  8.  
  9.     <Button
  10.         ohos:id="$+id:button1"
  11.         ohos:height="60vp"
  12.         ohos:width="100vp"
  13.         ohos:background_element="#00d8a0"
  14.         ohos:text="Java"
  15.         ohos:text_size="20fp"/>
  16.  
  17. </DirectionalLayout>

效果图

4 右下角

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:alignment="bottom|right"
  7.     ohos:orientation="vertical">
  8.  
  9.     <Button
  10.         ohos:id="$+id:button1"
  11.         ohos:height="60vp"
  12.         ohos:width="100vp"
  13.         ohos:background_element="#00d8a0"
  14.         ohos:text="Java"
  15.         ohos:text_size="20fp"/>
  16.  
  17. </DirectionalLayout>

这里就先了解这几个

DirectionalLayout 自有属性 orientation

orientation设置布局内组件的排列方式的属性是 ,如果没有设置默认为垂直排列

控制垂直排列的属性为 ohos:orientation="vertical"

控制水平排列的属性为ohos:orientation="horizontal"

orientation设置垂直排列

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">
  7.  
  8.     <Button
  9.         ohos:id="$+id:button1"
  10.         ohos:height="60vp"
  11.         ohos:width="120vp"
  12.         ohos:top_margin="10vp"
  13.         ohos:background_element="#00d8a0"
  14.         ohos:text_size="20fp"
  15.         ohos:text="Java"/>
  16.  
  17.     <Button
  18.         ohos:id="$+id:button2"
  19.         ohos:height="60vp"
  20.         ohos:width="120vp"
  21.         ohos:background_element="#00d8a0"
  22.         ohos:text="Android"
  23.         ohos:text_size="20fp"
  24.         ohos:top_margin="10vp"/>
  25.  
  26.     <Button
  27.         ohos:id="$+id:button3"
  28.         ohos:height="60vp"
  29.         ohos:width="120vp"
  30.         ohos:background_element="#00d8a0"
  31.         ohos:text="HarmonyOS"
  32.         ohos:text_size="20fp"
  33.         ohos:top_margin="10vp"/>
  34.  
  35.  
  36.  
  37. </DirectionalLayout>
  38.

效果如下

orientation 水平排列

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="horizontal">
  7.  
  8.     <Button
  9.         ohos:id="$+id:button1"
  10.         ohos:height="60vp"
  11.         ohos:width="100vp"
  12.         ohos:top_margin="10vp"
  13.         ohos:left_margin="10vp"
  14.         ohos:background_element="#00d8a0"
  15.         ohos:text_size="20fp"
  16.         ohos:text="Java"/>
  17.  
  18.     <Button
  19.         ohos:id="$+id:button2"
  20.         ohos:height="60vp"
  21.         ohos:width="100vp"
  22.         ohos:left_margin="10vp"
  23.         ohos:background_element="#00d8a0"
  24.         ohos:text="Android"
  25.         ohos:text_size="20fp"
  26.         ohos:top_margin="10vp"/>
  27.  
  28.     <Button
  29.         ohos:id="$+id:button3"
  30.         ohos:height="60vp"
  31.         ohos:width="100vp"
  32.         ohos:left_margin="10vp"
  33.         ohos:background_element="#00d8a0"
  34.         ohos:text="HarmonyOS"
  35.         ohos:text_size="20fp"
  36.         ohos:top_margin="10vp"/>
  37.  
  38.  
  39.  
  40. </DirectionalLayout>
  41.

效果如下

DirectionalLayout 自有属性 total_weight

这个属性有意思就是子内容权重数之和，感觉可以不设置，这里设置了就限制了子内容自己要设置的数值了，假如在DirectionalLayout 设置为2 子内容刚好有2个内容的话可以设置数值为1，如果设置1 子内容2个子内容不许设置0.5 如果设置子内容设置1的话就显示1个内容了，个人目前感觉没有特别的需求不要设置它了，因为不设置total_weight也不影响使用权重，

下面截图说下自己是实验了的

下面没有设置total_weight正常的情况

底部使用的是1 ，如果total_weight 设置为3 效果合理，如果我设置为2，或者1 那就行了如下

total_weight 会把子内容权重的值限制了(这里解释下就是子内容weight的值有时候我想没一个设置2，或者0.5之类，还需要算号里面权重的的和在写到外层去，现在是不写也能实现的想要的功能)

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所包含组件可支持的XML属性：layout_alignment

这个属性需要特别注意呢

当orientation 设置水平的时候左右无效果的看下图

所以使用的时候需要注意orientation 设置的属性，下面的设置垂直的时候可以使用左右

同样的道理当orientation 设置垂直的上和下的属性就不能使用了

个人试了多次总结情况大致如下：

当 ohos:orientation="vertical" 可以使用layout_alignment可以使用的属性有left,right,center，horizontal_center(水平居中)，其他情况无效

当ohos:orientation="orientation" 可以使用layout_alignment可以使用的属性有top,botton,center，vertical_center(垂直居中),其他情况无效

DirectionalLayout所包含组件可支持的XML属性：weight(权重)

水平方向的权重

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="match_parent"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="horizontal">
  7.  
  8.     <Button
  9.         ohos:id="$+id:button1"
  10.         ohos:height="60fp"
  11.         ohos:width="0"
  12.         ohos:weight="1"
  13.         ohos:left_margin="10vp"
  14.         ohos:right_margin="10vp"
  15.         ohos:background_element="#00d8a0"
  16.         ohos:text="Java"
  17.         ohos:text_size="20fp"/>
  18.  
  19.         <Button
  20.             ohos:id="$+id:button2"
  21.             ohos:height="60vp"
  22.             ohos:width="0"
  23.             ohos:weight="1"
  24.             ohos:left_margin="10vp"
  25.             ohos:right_margin="10vp"
  26.             ohos:background_element="#00d8a0"
  27.             ohos:text="Android"
  28.             ohos:text_size="20fp"/>
  29.  
  30.         <Button
  31.             ohos:id="$+id:button3"
  32.             ohos:height="60vp"
  33.             ohos:width="0"
  34.             ohos:weight="1"
  35.             ohos:left_margin="10vp"
  36.             ohos:right_margin="10vp"
  37.             ohos:background_element="#00d8a0"
  38.             ohos:text="HarmonyOS"
  39.             ohos:text_size="20fp"/>
  40.  
  41.  
  42. </DirectionalLayout>
  43.  
  44.  
  45.  
效果图

垂直方向的权重

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="200vp"
  5.     ohos:width="match_parent"
  6.     ohos:orientation="vertical">
  7.  
  8.     <Button
  9.         ohos:id="$+id:button1"
  10.         ohos:height="0"
  11.         ohos:width="120fp"
  12.         ohos:weight="1"
  13.         ohos:top_margin="10vp"
  14.         ohos:bottom_margin="10vp"
  15.         ohos:background_element="#00d8a0"
  16.         ohos:text="Java"
  17.         ohos:text_size="20fp"/>
  18.  
  19.         <Button
  20.             ohos:id="$+id:button2"
  21.             ohos:height="0"
  22.             ohos:width="120fp"
  23.             ohos:weight="1"
  24.             ohos:top_margin="10vp"
  25.             ohos:bottom_margin="10vp"
  26.             ohos:background_element="#00d8a0"
  27.             ohos:text="Android"
  28.             ohos:text_size="20fp"/>
  29.  
  30.         <Button
  31.             ohos:id="$+id:button3"
  32.             ohos:height="0"
  33.             ohos:width="120fp"
  34.             ohos:weight="1"
  35.             ohos:top_margin="10vp"
  36.             ohos:bottom_margin="10vp"
  37.             ohos:background_element="#00d8a0"
  38.             ohos:text="HarmonyOS"
  39.             ohos:text_size="20fp"/>
  40.  
  41.  
  42. </DirectionalLayout>
  43.  
  44.  
  45.

效果图

,

官方参考连接地址

其他的布局

HarmonyOS UI开发 DependentLayout(依赖布局) 的使用

HarmonyOS UI开发 TableLayout(表格布局) 的使用

HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用

HarmonyOS UI开发 PositionLayout(位置布局) 的使用

HarmonyOS UI开发 TableLayout(表格布局) 的使用​​​​​​​

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/270608
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号