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"
orientation	子布局排列方向	vertical	表示垂直方向布局。	ohos:orientation="vertical"
total_weight	所有子视图的权重之和	float类型	可以直接设置浮点数值，也可以引用float浮点数资源。	ohos:total_weight="2.5" ohos:total_weight="$float:total_weight"

DirectionalLayout 自有属性 alignment

1 底部对齐

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="bottom"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DirectionalLayout>

效果图

2 右边对齐

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DirectionalLayout>

效果图

3 居中

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DirectionalLayout>

效果图

4 右下角

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="bottom|right"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DirectionalLayout>

这里就先了解这几个

DirectionalLayout 自有属性 orientation

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

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

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

orientation设置垂直排列

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#00d8a0"ohos:text_size="20fp"ohos:text="Java"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="120vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"ohos:top_margin="10vp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="120vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:top_margin="10vp"/></DirectionalLayout>

效果如下

orientation 水平排列

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text_size="20fp"ohos:text="Java"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="100vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"ohos:top_margin="10vp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="100vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:top_margin="10vp"/></DirectionalLayout>

效果如下

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(权重)

水平方向的权重

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/></DirectionalLayout>

效果图

垂直方向的权重

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="200vp"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/></DirectionalLayout>

效果图

官方参考连接地址

其他的布局

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

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

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

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