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

鸿蒙HarmonyOS开发实战—Java UI框架(DependentLayout)

作者：你好赵伟 | 2024-03-29 17:44:11

赞

踩

鸿蒙HarmonyOS开发实战—Java UI框架(DependentLayout)

DependentLayout

DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

支持的XML属性DependentLayout的共有XML属性继承自：Component

DependentLayout的共有XML属性继承自：Component

DependentLayout的自有XML属性见下表：

属性名称

中文描述

取值

取值说明

使用案例

alignment

对齐方式

left

表示左对齐。

可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left"

top

表示顶部对齐。

right

表示右对齐。

bottom

表示底部对齐。

horizontal_center

表示水平居中对齐。

vertical_center

表示垂直居中对齐。

center

表示居中对齐。

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"

  • 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会跟随当前布局起始方向变化。 以上几种不同对齐方式的效果如下图所示：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="500vp"
  5.     ohos:width="500vp"
  6.     ohos:background_element="#EDEDED">
  7.  
  8.     <Text
  9.         ohos:id="$+id:text_center"
  10.         ohos:height="210vp"
  11.         ohos:width="210vp"
  12.         ohos:background_element="#878787"
  13.         ohos:center_in_parent="true"
  14.         ohos:text="center"
  15.         ohos:text_alignment="center"
  16.         ohos:text_size="20fp"
  17.         ohos:text_color="#FFFFFF"/>
  18.  
  19.     <Text
  20.         ohos:id="$+id:text_left"
  21.         ohos:height="match_content"
  22.         ohos:width="match_content"
  23.         ohos:left_of="$id:text_center"
  24.         ohos:background_element="#FF9912"
  25.         ohos:padding="8vp"
  26.         ohos:text="left_of"
  27.         ohos:text_size="18fp"
  28.         ohos:text_color="#FFFFFF"/>
  29.  
  30.     <Text
  31.         ohos:id="$+id:text_right"
  32.         ohos:height="match_content"
  33.         ohos:width="match_content"
  34.         ohos:right_of="$id:text_center"
  35.         ohos:background_element="#FF9912"
  36.         ohos:padding="8vp"
  37.         ohos:text="right_of"
  38.         ohos:text_size="18fp"
  39.         ohos:text_color="#FFFFFF"/>
  40.  
  41.     <Text
  42.         ohos:id="$+id:text_above"
  43.         ohos:height="match_content"
  44.         ohos:width="match_content"
  45.         ohos:above="$id:text_center"
  46.         ohos:background_element="#FF9912"
  47.         ohos:padding="8vp"
  48.         ohos:text="above"
  49.         ohos:text_size="18fp"
  50.         ohos:text_color="#FFFFFF"/>
  51.  
  52.     <Text
  53.         ohos:id="$+id:text_below"
  54.         ohos:height="match_content"
  55.         ohos:width="match_content"
  56.         ohos:below="$id:text_center"
  57.         ohos:background_element="#FF9912"
  58.         ohos:padding="8vp"
  59.         ohos:text="below"
  60.         ohos:text_size="18fp"
  61.         ohos:text_color="#FFFFFF"/>
  62. </DependentLayout>

复制

  •  根据边对齐

align_left、 align_right、 align_top、 align_bottom、 align_start和align_end都是与同级组件的相同边对齐。例如align_left对齐方式，即将当前组件与同级组件的左边缘对齐。其他几种对齐方式遵循的逻辑与此相同，需要注意的是align_start和align_end会跟随当前布局起始方向变化。

以上几种不同对齐方式的效果如下图所示：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="500vp"
  5.     ohos:width="500vp"
  6.     ohos:background_element="#EDEDED">
  7.  
  8.     <Text
  9.         ohos:id="$+id:text_center"
  10.         ohos:height="210vp"
  11.         ohos:width="210vp"
  12.         ohos:background_element="#878787"
  13.         ohos:center_in_parent="true"
  14.         ohos:text="center"
  15.         ohos:text_alignment="center"
  16.         ohos:text_size="20fp"
  17.         ohos:text_color="#FFFFFF"/>
  18.  
  19.     <Text
  20.         ohos:id="$+id:text_align_top"
  21.         ohos:height="match_content"
  22.         ohos:width="match_content"
  23.         ohos:align_top="$id:text_center"
  24.         ohos:background_element="#228B22"
  25.         ohos:padding="8vp"
  26.         ohos:text="align_top"
  27.         ohos:text_size="18fp"
  28.         ohos:text_color="#FFFFFF"/>
  29.  
  30.     <Text
  31.         ohos:id="$+id:text_align_bottom"
  32.         ohos:height="match_content"
  33.         ohos:width="match_content"
  34.         ohos:align_bottom="$id:text_center"
  35.         ohos:background_element="#228B22"
  36.         ohos:padding="8vp"
  37.         ohos:text="align_bottom"
  38.         ohos:text_size="18fp"
  39.         ohos:text_color="#FFFFFF"/>
  40.  
  41.     <Text
  42.         ohos:id="$+id:text_align_left"
  43.         ohos:height="match_content"
  44.         ohos:width="match_content"
  45.         ohos:align_left="$id:text_center"
  46.         ohos:background_element="#228B22"
  47.         ohos:padding="8vp"
  48.         ohos:text="align_left"
  49.         ohos:text_size="18fp"
  50.         ohos:text_color="#FFFFFF"/>
  51.  
  52.     <Text
  53.         ohos:id="$+id:text_align_right"
  54.         ohos:height="match_content"
  55.         ohos:width="match_content"
  56.         ohos:align_right="$id:text_center"
  57.         ohos:background_element="#228B22"
  58.         ohos:padding="8vp"
  59.         ohos:text="align_right"
  60.         ohos:text_size="18fp"
  61.         ohos:text_color="#FFFFFF"/>
  62. </DependentLayout>

复制

  • 组合属性对齐方式

在逻辑不冲突的情况下，开发者可以组合使用多种对齐方式来进行布局。以下为一些常用的对齐方式效果图

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="500vp"
  5.     ohos:width="500vp"
  6.     ohos:background_element="#EDEDED">
  7.  
  8.     <Text
  9.         ohos:id="$+id:text_center"
  10.         ohos:height="210vp"
  11.         ohos:width="210vp"
  12.         ohos:background_element="#878787"
  13.         ohos:center_in_parent="true"
  14.         ohos:text="center"
  15.         ohos:text_alignment="center"
  16.         ohos:text_size="20fp"
  17.         ohos:text_color="#FFFFFF"/>
  18.  
  19.     <Text
  20.         ohos:id="$+id:text_left_and_above"
  21.         ohos:height="match_content"
  22.         ohos:width="100vp"
  23.         ohos:left_of="$id:text_center"
  24.         ohos:above="$id:text_center"
  25.         ohos:background_element="#FF9912"
  26.         ohos:padding="8vp"
  27.         ohos:multiple_lines="true"
  28.         ohos:text="left_of and above"
  29.         ohos:text_size="18fp"
  30.         ohos:text_color="#FFFFFF"/>
  31.  
  32.     <Text
  33.         ohos:id="$+id:text_left_and_below"
  34.         ohos:height="match_content"
  35.         ohos:width="100vp"
  36.         ohos:left_of="$id:text_center"
  37.         ohos:below="$id:text_center"
  38.         ohos:background_element="#FF9912"
  39.         ohos:padding="8vp"
  40.         ohos:multiple_lines="true"
  41.         ohos:text="left_of and below"
  42.         ohos:text_size="18fp"
  43.         ohos:text_color="#FFFFFF"/>
  44.  
  45.     <Text
  46.         ohos:id="$+id:text_right_and_above"
  47.         ohos:height="match_content"
  48.         ohos:width="100vp"
  49.         ohos:right_of="$id:text_center"
  50.         ohos:above="$id:text_center"
  51.         ohos:background_element="#FF9912"
  52.         ohos:padding="8vp"
  53.         ohos:multiple_lines="true"
  54.         ohos:text="right_of and above"
  55.         ohos:text_size="18fp"
  56.         ohos:text_color="#FFFFFF"/>
  57.  
  58.     <Text
  59.         ohos:id="$+id:text_right_and_below"
  60.         ohos:height="match_content"
  61.         ohos:width="100vp"
  62.         ohos:right_of="$id:text_center"
  63.         ohos:below="$id:text_center"
  64.         ohos:background_element="#FF9912"
  65.         ohos:padding="8vp"
  66.         ohos:multiple_lines="true"
  67.         ohos:text="right_of and below"
  68.         ohos:text_size="18fp"
  69.         ohos:text_color="#FFFFFF"/>
  70.  
  71.     <Text
  72.         ohos:id="$+id:text_align_top_and_left"
  73.         ohos:height="match_content"
  74.         ohos:width="100vp"
  75.         ohos:align_top="$id:text_center"
  76.         ohos:left_of="$id:text_center"
  77.         ohos:background_element="#228B22"
  78.         ohos:padding="8vp"
  79.         ohos:multiple_lines="true"
  80.         ohos:text="align_top and left"
  81.         ohos:text_size="18fp"
  82.         ohos:text_color="#FFFFFF"/>
  83.  
  84.     <Text
  85.         ohos:id="$+id:text_align_top_and_right"
  86.         ohos:height="match_content"
  87.         ohos:width="100vp"
  88.         ohos:align_top="$id:text_center"
  89.         ohos:right_of="$id:text_center"
  90.         ohos:background_element="#228B22"
  91.         ohos:padding="8vp"
  92.         ohos:multiple_lines="true"
  93.         ohos:text="align_top and right"
  94.         ohos:text_size="18fp"
  95.         ohos:text_color="#FFFFFF"/>
  96.  
  97.     <Text
  98.         ohos:id="$+id:text_align_bottom_and_left"
  99.         ohos:height="match_content"
  100.         ohos:width="100vp"
  101.         ohos:align_bottom="$id:text_center"
  102.         ohos:left_of="$id:text_center"
  103.         ohos:background_element="#228B22"
  104.         ohos:padding="8vp"
  105.         ohos:multiple_lines="true"
  106.         ohos:text="align_bottom and left"
  107.         ohos:text_size="18fp"
  108.         ohos:text_color="#FFFFFF"/>
  109.  
  110.     <Text
  111.         ohos:id="$+id:text_align_bottom_and_right"
  112.         ohos:height="match_content"
  113.         ohos:width="100vp"
  114.         ohos:align_bottom="$id:text_center"
  115.         ohos:right_of="$id:text_center"
  116.         ohos:background_element="#228B22"
  117.         ohos:padding="8vp"
  118.         ohos:multiple_lines="true"
  119.         ohos:text="align_bottom and right"
  120.         ohos:text_size="18fp"
  121.         ohos:text_color="#FFFFFF"/>
  122.  
  123.     <Text
  124.         ohos:id="$+id:text_align_left_and_above"
  125.         ohos:height="match_content"
  126.         ohos:width="100vp"
  127.         ohos:align_left="$id:text_center"
  128.         ohos:above="$id:text_center"
  129.         ohos:background_element="#228B22"
  130.         ohos:padding="8vp"
  131.         ohos:multiple_lines="true"
  132.         ohos:text="align_left and above"
  133.         ohos:text_size="18fp"
  134.         ohos:text_color="#FFFFFF"/>
  135.  
  136.     <Text
  137.         ohos:id="$+id:text_align_left_and_below"
  138.         ohos:height="match_content"
  139.         ohos:width="100vp"
  140.         ohos:align_left="$id:text_center"
  141.         ohos:below="$id:text_center"
  142.         ohos:background_element="#228B22"
  143.         ohos:padding="8vp"
  144.         ohos:multiple_lines="true"
  145.         ohos:text="align_left and below"
  146.         ohos:text_size="18fp"
  147.         ohos:text_color="#FFFFFF"/>
  148.  
  149.     <Text
  150.         ohos:id="$+id:text_align_right_and_above"
  151.         ohos:height="match_content"
  152.         ohos:width="100vp"
  153.         ohos:align_right="$id:text_center"
  154.         ohos:above="$id:text_center"
  155.         ohos:background_element="#228B22"
  156.         ohos:padding="8vp"
  157.         ohos:multiple_lines="true"
  158.         ohos:text="align_right and above"
  159.         ohos:text_size="18fp"
  160.         ohos:text_color="#FFFFFF"/>
  161.  
  162.     <Text
  163.         ohos:id="$+id:text_align_right_and_below"
  164.         ohos:height="match_content"
  165.         ohos:width="100vp"
  166.         ohos:align_right="$id:text_center"
  167.         ohos:below="$id:text_center"
  168.         ohos:background_element="#228B22"
  169.         ohos:padding="8vp"
  170.         ohos:multiple_lines="true"
  171.         ohos:text="align_right and below"
  172.         ohos:text_size="18fp"
  173.         ohos:text_color="#FFFFFF"/>
  174.  
  175. </DependentLayout>

复制

相对于父级组件的对齐
  • 单个属性对齐方式

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="500vp"
  5.     ohos:width="500vp"
  6.     ohos:background_element="#878787">
  7.  
  8.     <Text
  9.         ohos:height="100vp"
  10.         ohos:width="match_content"
  11.         ohos:align_parent_left="true"
  12.         ohos:background_element="#FF9912"
  13.         ohos:padding="12vp"
  14.         ohos:multiple_lines="true"
  15.         ohos:text="align_parent_left"
  16.         ohos:text_alignment="vertical_center"
  17.         ohos:text_size="18fp"
  18.         ohos:text_color="#FFFFFF"/>
  19.  
  20.     <Text
  21.         ohos:height="match_content"
  22.         ohos:width="match_content"
  23.         ohos:align_parent_right="true"
  24.         ohos:background_element="#228B22"
  25.         ohos:padding="8vp"
  26.         ohos:multiple_lines="true"
  27.         ohos:text="align_parent_right"
  28.         ohos:text_size="18fp"
  29.         ohos:text_color="#FFFFFF"/>
  30.  
  31.     <Text
  32.         ohos:height="match_content"
  33.         ohos:width="match_content"
  34.         ohos:align_parent_top="true"
  35.         ohos:background_element="#228B22"
  36.         ohos:padding="8vp"
  37.         ohos:multiple_lines="true"
  38.         ohos:text="align_parent_top"
  39.         ohos:text_size="18fp"
  40.         ohos:text_color="#FFFFFF"/>
  41.  
  42.     <Text
  43.         ohos:height="match_content"
  44.         ohos:width="match_content"
  45.         ohos:align_parent_bottom="true"
  46.         ohos:background_element="#228B22"
  47.         ohos:padding="8vp"
  48.         ohos:multiple_lines="true"
  49.         ohos:text="align_parent_bottom"
  50.         ohos:text_size="18fp"
  51.         ohos:text_color="#FFFFFF"/>
  52.  
  53.     <Text
  54.         ohos:height="match_content"
  55.         ohos:width="match_content"
  56.         ohos:center_in_parent="true"
  57.         ohos:background_element="#228B22"
  58.         ohos:padding="8vp"
  59.         ohos:multiple_lines="true"
  60.         ohos:text="center_in_parent"
  61.         ohos:text_size="18fp"
  62.         ohos:text_color="#FFFFFF"/>
  63.  
  64.     <Text
  65.         ohos:height="match_content"
  66.         ohos:width="match_content"
  67.         ohos:horizontal_center="true"
  68.         ohos:background_element="#228B22"
  69.         ohos:padding="8vp"
  70.         ohos:multiple_lines="true"
  71.         ohos:text="horizontal_center"
  72.         ohos:text_size="18fp"
  73.         ohos:text_color="#FFFFFF"/>
  74.  
  75.     <Text
  76.         ohos:height="match_content"
  77.         ohos:width="match_content"
  78.         ohos:vertical_center="true"
  79.         ohos:background_element="#228B22"
  80.         ohos:padding="8vp"
  81.         ohos:multiple_lines="true"
  82.         ohos:text="vertical_center"
  83.         ohos:text_size="18fp"
  84.         ohos:text_color="#FFFFFF"/>
  85. </DependentLayout>

复制

  • 组合属性对齐方式

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:height="500vp"
  5.     ohos:width="640vp"
  6.     ohos:background_element="#878787">
  7.  
  8.     <Text
  9.         ohos:height="match_content"
  10.         ohos:width="match_content"
  11.         ohos:center_in_parent="true"
  12.         ohos:background_element="#228B22"
  13.         ohos:padding="8vp"
  14.         ohos:multiple_lines="true"
  15.         ohos:text="center_in_parent"
  16.         ohos:text_size="18fp"
  17.         ohos:text_color="#FFFFFF"/>
  18.  
  19.     <Text
  20.         ohos:height="match_content"
  21.         ohos:width="190vp"
  22.         ohos:align_parent_left="true"
  23.         ohos:align_parent_top="true"
  24.         ohos:background_element="#228B22"
  25.         ohos:padding="8vp"
  26.         ohos:multiple_lines="true"
  27.         ohos:text="align_parent_left and align_parent_top"
  28.         ohos:text_size="18fp"
  29.         ohos:text_color="#FFFFFF"/>
  30.  
  31.     <Text
  32.         ohos:height="match_content"
  33.         ohos:width="190vp"
  34.         ohos:align_parent_left="true"
  35.         ohos:align_parent_bottom="true"
  36.         ohos:background_element="#228B22"
  37.         ohos:padding="8vp"
  38.         ohos:multiple_lines="true"
  39.         ohos:text="align_parent_left and align_parent_bottom"
  40.         ohos:text_size="18fp"
  41.         ohos:text_color="#FFFFFF"/>
  42.  
  43.     <Text
  44.         ohos:height="match_content"
  45.         ohos:width="190vp"
  46.         ohos:align_parent_right="true"
  47.         ohos:align_parent_top="true"
  48.         ohos:background_element="#228B22"
  49.         ohos:padding="8vp"
  50.         ohos:multiple_lines="true"
  51.         ohos:text="align_parent_right and align_parent_top"
  52.         ohos:text_size="18fp"
  53.         ohos:text_color="#FFFFFF"/>
  54.  
  55.     <Text
  56.         ohos:height="match_content"
  57.         ohos:width="190vp"
  58.         ohos:align_parent_right="true"
  59.         ohos:align_parent_bottom="true"
  60.         ohos:background_element="#228B22"
  61.         ohos:padding="8vp"
  62.         ohos:multiple_lines="true"
  63.         ohos:text="align_parent_right and align_parent_bottom"
  64.         ohos:text_size="18fp"
  65.         ohos:text_color="#FFFFFF"/>
  66.  
  67.     <Text
  68.         ohos:height="match_content"
  69.         ohos:width="190vp"
  70.         ohos:horizontal_center="true"
  71.         ohos:align_parent_top="true"
  72.         ohos:background_element="#228B22"
  73.         ohos:padding="8vp"
  74.         ohos:multiple_lines="true"
  75.         ohos:text="horizontal_center and align_parent_top"
  76.         ohos:text_size="18fp"
  77.         ohos:text_color="#FFFFFF"/>
  78.  
  79.     <Text
  80.         ohos:height="match_content"
  81.         ohos:width="190vp"
  82.         ohos:horizontal_center="true"
  83.         ohos:align_parent_bottom="true"
  84.         ohos:background_element="#228B22"
  85.         ohos:padding="8vp"
  86.         ohos:multiple_lines="true"
  87.         ohos:text="horizontal_center and align_parent_bottom"
  88.         ohos:text_size="18fp"
  89.         ohos:text_color="#FFFFFF"/>
  90.  
  91.     <Text
  92.         ohos:height="match_content"
  93.         ohos:width="190vp"
  94.         ohos:vertical_center="true"
  95.         ohos:align_parent_left="true"
  96.         ohos:background_element="#228B22"
  97.         ohos:padding="8vp"
  98.         ohos:multiple_lines="true"
  99.         ohos:text="vertical_center and align_parent_left"
  100.         ohos:text_size="18fp"
  101.         ohos:text_color="#FFFFFF"/>
  102.  
  103.     <Text
  104.         ohos:height="match_content"
  105.         ohos:width="190vp"
  106.         ohos:vertical_center="true"
  107.         ohos:align_parent_right="true"
  108.         ohos:background_element="#228B22"
  109.         ohos:padding="8vp"
  110.         ohos:multiple_lines="true"
  111.         ohos:text="vertical_center and align_parent_right"
  112.         ohos:text_size="18fp"
  113.         ohos:text_color="#FFFFFF"/>
  114.  
  115. </DependentLayout>

复制

场景示例

使用DependentLayout可以轻松实现内容丰富的布局。

 源码示例：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DependentLayout
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4.     ohos:width="match_parent"
  5.     ohos:height="match_content"
  6.     ohos:background_element="$graphic:color_background_gray_element">
  7.     <Text
  8.         ohos:id="$+id:text1"
  9.         ohos:width="match_parent"
  10.         ohos:height="match_content"
  11.         ohos:text_size="25fp"
  12.         ohos:top_margin="15vp"
  13.         ohos:left_margin="15vp"
  14.         ohos:right_margin="15vp"
  15.         ohos:background_element="$graphic:color_gray_element"
  16.         ohos:text="Title"
  17.         ohos:text_weight="1000"
  18.         ohos:text_alignment="horizontal_center"
  19.     />
  20.     <Text
  21.         ohos:id="$+id:text2"
  22.         ohos:width="match_content"
  23.         ohos:height="120vp"
  24.         ohos:text_size="10fp"
  25.         ohos:background_element="$graphic:color_gray_element"
  26.         ohos:text="Catalog"
  27.         ohos:top_margin="15vp"
  28.         ohos:left_margin="15vp"
  29.         ohos:right_margin="15vp"
  30.         ohos:bottom_margin="15vp"
  31.         ohos:align_parent_left="true"
  32.         ohos:text_alignment="center"
  33.         ohos:multiple_lines="true"
  34.         ohos:below="$id:text1"
  35.         ohos:text_font="serif"/>
  36.     <Text
  37.         ohos:id="$+id:text3"
  38.         ohos:width="match_parent"
  39.         ohos:height="120vp"
  40.         ohos:text_size="25fp"
  41.         ohos:background_element="$graphic:color_gray_element"
  42.         ohos:text="Content"
  43.         ohos:top_margin="15vp"
  44.         ohos:right_margin="15vp"
  45.         ohos:bottom_margin="15vp"
  46.         ohos:text_alignment="center"
  47.         ohos:below="$id:text1"
  48.         ohos:end_of="$id:text2"
  49.         ohos:text_font="serif"/>
  50.     <Button
  51.         ohos:id="$+id:button1"
  52.         ohos:width="70vp"
  53.         ohos:height="match_content"
  54.         ohos:text_size="15fp"
  55.         ohos:background_element="$graphic:color_gray_element"
  56.         ohos:text="Previous"
  57.         ohos:right_margin="15vp"
  58.         ohos:bottom_margin="15vp"
  59.         ohos:below="$id:text3"
  60.         ohos:left_of="$id:button2"
  61.         ohos:italic="false"
  62.         ohos:text_weight="5"
  63.         ohos:text_font="serif"/>
  64.     <Button
  65.         ohos:id="$+id:button2"
  66.         ohos:width="70vp"
  67.         ohos:height="match_content"
  68.         ohos:text_size="15fp"
  69.         ohos:background_element="$graphic:color_gray_element"
  70.         ohos:text="Next"
  71.         ohos:right_margin="15vp"
  72.         ohos:bottom_margin="15vp"
  73.         ohos:align_parent_end="true"
  74.         ohos:below="$id:text3"
  75.         ohos:italic="false"
  76.         ohos:text_weight="5"
  77.         ohos:text_font="serif"/>
  78. </DependentLayout>

复制

color_background_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#ffbbbbbb"/>
  6. </shape>

复制

color_gray_element.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3.     ohos:shape="rectangle">
  4.     <solid
  5.         ohos:color="#878787"/>
  6. </shape>

为了能够让大家跟上互联网时代的技术迭代，赶上互联网开发人员寒冬期间一波红利，在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料，有需要的小伙伴自行领取，限时开源，先到先得~~~~

纯血版鸿蒙 HarmonyOS 4.0 视频学习资料

 需要以上视频学习资料小伙伴

请点击→纯血版全套鸿蒙HarmonyOS学习资料

《纯血版华为鸿蒙 (Harmony OS)开发手册》

这份手册涵盖了当前鸿蒙 (Harmony OS) 开发技术必掌握的核心知识点

纯血版鸿蒙 (Harmony OS)开发手册部分精彩内容

HarmonyOS 概念：

  • 系统定义
  • 技术架构
  • 技术特性
  • 系统安全

如何快速入门？

  • 基本概念
  • 构建第一个ArkTS应用
  • 构建第一个JS应用
  • ……


开发基础知识： 

  • 应用基础知识
  • 配置文件
  • 应用数据管理
  • 应用安全管理
  • 应用隐私保护
  • 三方应用调用管控机制
  • 资源分类与访问
  • 学习ArkTS语言
  • ……

基于ArkTS 开发：

  • Ability开发
  • UI开发
  • 公共事件与通知
  • 窗口管理
  • 媒体
  • 安全
  • 网络与链接
  • 电话服务
  • 数据管理
  • 后台任务(Background Task)管理
  • 设备管理
  • 设备使用信息统计
  • DFX
  • 国际化开发
  • 折叠屏系列
  • .……

获取以上文中提到的这份纯血版鸿蒙 (Harmony OS) 开发资料的小伙伴 

请点击→纯血版全套鸿蒙HarmonyOS学习资料

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

推荐阅读
相关标签

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