HarmonyOS之常用布局DirectionalLayout的使用

Posted Forever_wj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HarmonyOS之常用布局DirectionalLayout的使用相关的知识,希望对你有一定的参考价值。

一、DirectionalLayout

  • DirectionalLayout 是 Java UI 中的一种重要组件布局,用于将一组组件(Component)按照水平或者垂直方向排布,能够方便地对齐布局内的组件。该布局和其他布局的组合,可以实现更加丰富的布局方式。
  • 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"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="match_content"
	    ohos:orientation="vertical">
	    <Button
	        ohos:width="33vp"
	        ohos:height="20vp"
	        ohos:bottom_margin="3vp"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 1"/>
	    <Button
	        ohos:width="33vp"
	        ohos:height="20vp"
	        ohos:bottom_margin="3vp"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 2"/>
	    <Button
	        ohos: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">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
② 水平排列
  • 水平方向排列三个按钮,效果如下:

在这里插入图片描述

  • 示例代码:
	<?xml version="1.0" encoding="utf-8"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="match_content"
	    ohos:orientation="horizontal">
	    <Button
	        ohos:width="33vp"
	        ohos:height="20vp"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 1"/>
	    <Button
	        ohos:width="33vp"
	        ohos:height="20vp"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 2"/>
	    <Button
	        ohos: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">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
  • DirectionalLayout 不会自动换行,其子组件会按照设定的方向依次排列,若超过布局本身的大小,超出布局大小的部分将不会被显示,例如:
	<?xml version="1.0" encoding="utf-8"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="20vp"
	    ohos:orientation="horizontal">
	    <Button
	        ohos:width="166vp"
	        ohos:height="match_content"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 1"/>
	    <Button
	        ohos:width="166vp"
	        ohos:height="match_content"
	        ohos:left_margin="13vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 2"/>
	    <Button
	        ohos: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">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
  • 此布局包含了三个按钮,但由于 DirectionalLayout 不会自动换行,超出布局大小的组件部分无法显示。界面显示如下:

在这里插入图片描述

四、对齐方式

  • DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式,当对齐方式与排列方式方向一致时,对齐方式不会生效,如设置了水平方向的排列方式,则左对齐、右对齐将不会生效。
  • 三种对齐方式的示例代码:
	<?xml version="1.0" encoding="utf-8"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="60vp">
	    <Button
	        ohos:width="50vp"
	        ohos:height="20vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:layout_alignment="left"
	        ohos:text="Button 1"/>
	    <Button
	        ohos:width="50vp"
	        ohos:height="20vp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:layout_alignment="horizontal_center"
	        ohos:text="Button 2"/>
	    <Button
	        ohos: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">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
  • 三种对齐方式效果示例:

在这里插入图片描述

五、权重

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

在这里插入图片描述

  • 示例代码:
	<?xml version="1.0" encoding="utf-8"?>
	<DirectionalLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="match_content"
	    ohos:orientation="horizontal">
	    <Button
	        ohos:width="0vp"
	        ohos:height="20vp"
	        ohos:weight="1"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:text="Button 1"/>
	    <Button
	        ohos:width="0vp"
	        ohos:height="20vp"
	        ohos:weight="1"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Button 2"/>
	    <Button
	        ohos: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">
	    <solid
	        ohos: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">
	    <solid
	        ohos: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">
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="vertical">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:bottom_margin="3vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos: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"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:orientation="horizontal">
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="33vp"
            ohos:height="20vp"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 2"/>
        <Button
            ohos: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"/>
    <DirectionalLayout
        ohos:width="match_parent"
        ohos:height="20vp"
        ohos:orientation="horizontal">
        <Button
            ohos:width="166vp"
            ohos:height="match_content"
            ohos:left_margin="13vp"
            ohos:background_element="$graphic:color_cyan_element"
            ohos:text="Button 1"/>
        <Button
            ohos:width="166vp"
            ohos:height="match_contentHarmonyOS之常用布局AdaptiveBoxLayout的使用

鸿蒙HarMonyOS之DirectionalLayout布局的常用属性

HarmonyOS之常用布局TableLayout的使用

鸿蒙HarMonyOS之DependentLayout布局的常用属性

HarmonyOS之常用布局StackLayout的使用

HarmonyOS之常用布局PositionLayout的使用