ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

2026/9/19 15:47:11 拓冰建站 浏览量
19.HarmonyOS App(JAVA)依赖布局DependentLayout使用方法

layout/ability_main.xml

显示位置不对:检查布局文件ohos:lef_of = "id:tuzi",比如显示在兔子的左侧,这里就会显示不对。

需要id前没有$符号。改为: ohos:lef_of = "$id:tuzi"

<?xml version="1.0" encoding="utf-8"?>
<!--鸿蒙系统app依赖布局 图像控件,添加图片-->
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Imageohos:id="$+id:tuzi"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:tuzi"ohos:margin="10vp"ohos:center_in_parent="true"/><Imageohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:huanxiong"ohos:left_of="$id:tuzi"ohos:center_in_parent="true"/><Imageohos:id="$+id:panda"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:panda"ohos:above="$id:tuzi"ohos:center_in_parent="true"/><Imageohos:id="$+id:dog"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:dog"ohos:right_of="$id:tuzi"ohos:center_in_parent="true"/><Imageohos:id="$+id:bird"ohos:height="match_content"ohos:width="match_content"ohos:image_src="$media:bird"ohos:below="$id:tuzi"ohos:center_in_parent="true"/></DependentLayout>

DependentLayout的自有XML属性见下表:

表1 DependentLayout的自有XML属性

属性名称

中文描述

取值

取值说明

使用案例

alignment

对齐方式

left

表示左对齐。

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

ohos:alignment="top|left"

ohos:alignment="left"

top

表示顶部对齐。

right

表示右对齐。

bottom

表示底部对齐。

horizontal_center

表示水平居中对齐。

vertical_center

表示垂直居中对齐。

center

表示居中对齐。

DependentLayout所包含组件可支持的XML属性见下表:

表2 DependentLayout所包含组件可支持的XML属性表

属性名称

中文描述

取值

取值说明

使用案例

left_of

将右边缘与另一个子组件的左边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • left_of与start_of、end_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,left_of会与start_of属性冲突;在“水平布局方向为从右到左”时,left_of会与end_of属性冲突。
  • 同时配置时,start_of、end_of优先级高于left_of属性。

ohos:left_of="$id:component_id"

right_of

将左边缘与另一个子组件的右边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • right_of与start_of、end_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,right_of会与end_of属性冲突;在“水平布局方向为从右到左”时,right_of会与start_of属性冲突。
  • 同时配置时,start_of、end_of优先级高于right_of属性。

ohos:right_of="$id:component_id"

start_of

将结束边与另一个子组件的起始边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • start_of与left_of、right_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,start_of会与left_of属性冲突;在“水平布局方向为从右到左”时,start_of会与right_of属性冲突。
  • 同时配置时,start_of优先级高于left_of、right_of属性。

ohos:start_of="$id:component_id"

end_of

将起始边与另一个子组件的结束边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • end_of与left_of、right_of属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,end_of会与right_of属性冲突;在“水平布局方向为从右到左”时,end_of会与left_of属性冲突。
  • 同时配置时,end_of优先级高于left_of、right_of属性。

ohos:end_of="$id:component_id"

above

将下边缘与另一个子组件的上边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:above="$id:component_id"

below

将上边缘与另一个子组件的下边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:below="$id:component_id"

align_baseline

将子组件的基线与另一个子组件的基线对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_baseline="$id:component_id"

align_left

将左边缘与另一个子组件的左边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_left与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_left会与align_start属性冲突;在“水平布局方向为从右到左”时,align_left会与align_end属性冲突。
  • 同时配置时,align_start、align_end优先级高于align_left属性。

ohos:align_left="$id:component_id"

align_top

将上边缘与另一个子组件的上边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_top="$id:component_id"

align_right

将右边缘与另一个子组件的右边缘对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_right与align_start、align_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_right会与align_end属性冲突;在“水平布局方向为从右到左”时,align_right会与align_start属性冲突。
  • 同时配置时,align_start、align_end优先级高于align_right属性。

ohos:align_right="$id:component_id"

align_bottom

将底边与另一个子组件的底边对齐

引用

仅可引用DependentLayout中包含的其他组件的id

ohos:align_bottom="$id:component_id"

align_start

将起始边与另一个子组件的起始边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_start与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_start会与align_left属性冲突;在“水平布局方向为从右到左”时,align_start会与align_right属性冲突。
  • 同时配置时,align_start优先级高于align_left、align_right属性。

ohos:align_start="$id:component_id"

align_end

将结束边与另一个子组件的结束边对齐

引用

仅可引用DependentLayout中包含的其他组件的id。

说明

  • align_end与align_left、align_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_end会与align_right属性冲突;在“水平布局方向为从右到左”时,align_end会与align_left属性冲突。
  • 同时配置时,align_end优先级高于align_left、align_right属性。

ohos:align_end="$id:component_id"

align_parent_left

将左边缘与父组件的左边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_left与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_left会与align_parent_start属性冲突;在“水平布局方向为从右到左”时,align_parent_left会与align_parent_end属性冲突。
  • 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_left属性。

ohos:align_parent_left="true"

ohos:align_parent_left="$boolean:true"

align_parent_top

将上边缘与父组件的上边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:align_parent_top="true"

ohos:align_parent_top="$boolean:true"

align_parent_right

将右边缘与父组件的右边缘对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_right与align_parent_start、align_parent_end属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_right会与align_parent_end属性冲突;在“水平布局方向为从右到左”时,align_parent_right会与align_parent_start属性冲突。
  • 同时配置时,align_parent_start、align_parent_end优先级高于align_parent_right属性。

ohos:align_parent_right="true"

ohos:align_parent_right="$boolean:true"

align_parent_bottom

将底边与父组件的底边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:align_parent_bottom="true"

ohos:align_parent_bottom="$boolean:true"

align_parent_start

将起始边与父组件的起始边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_start与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_start会与align_parent_left属性冲突;在“水平布局方向为从右到左”时,align_parent_start会与align_parent_right属性冲突。
  • 同时配置时,align_parent_start优先级高于align_parent_left、align_parent_right属性。

ohos:align_parent_start="true"

ohos:align_parent_start="$boolean:true"

align_parent_end

将结束边与父组件的结束边对齐

boolean类型

可以直接设置true/false,也可以引用boolean资源。

说明

  • align_parent_end与align_parent_left、align_parent_right属性有冲突,不建议一起使用。在“水平布局方向为从左到右”时,align_parent_end会与align_parent_right属性冲突;在“水平布局方向为从右到左”时,align_parent_end会与align_parent_left属性冲突。
  • 同时配置时,align_parent_end优先级高于align_parent_left、align_parent_right属性。

ohos:align_parent_end="true"

ohos:align_parent_end="$boolean:true"

center_in_parent

将子组件保持在父组件的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:center_in_parent="true"

ohos:center_in_parent="$boolean:true"

horizontal_center

将子组件保持在父组件水平方向的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:horizontal_center="true"

ohos:horizontal_center="$boolean:true"

vertical_center

将子组件保持在父组件垂直方向的中心

boolean类型

可以直接设置true/false,也可以引用boolean资源。

ohos:vertical_center="true"

ohos:vertical_center="$boolean:true"

排列方式

DependentLayout的排列方式是相对于其他同级组件或者父组件的位置进行布局。

相对于同级组件的对齐

  • 根据位置对齐

    left_of、right_of、start_of、end_of、above和below均相对于同级组件的不同位置进行对齐。例如left_of对齐方式,即将右边缘与同级组件的左边缘对齐,对齐后位于同级组件的左侧。其他几种对齐方式遵循的逻辑与此相同,需要注意的是start_of和end_of会跟随当前布局起始方向变化。