<DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="$media:bg"> <Text ohos:id="$+id:a" ohos:height="match_content" ohos:width="match_content" ohos:background_element="#EC9DAA" ohos:margin="10vp" ohos:padding="10vp" ohos:text="我是A卡" ohos:text_size="18fp"/> <Text ohos:id="$+id:b" ohos:end_of="$id:a" ohos:height="match_content" ohos:width="match_content" ohos:background_element="#EC9DFF" ohos:margin="10vp" ohos:padding="10vp" ohos:text="我是B神，躲在A后边" ohos:text_size="18fp"/></DependentLayout>
运行虚拟机之后，效果如下图所示：
有在尾部的end_of，就有在前面的start_of，还有在左边的left_of等等，更多用于指定相对位置的属性，如下表所示：
属性名称
中文描述
取值
取值说明
使用案例
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"
2. 相对父级组件
内部组件相对于外部组件的位置，如内部组件A在外部组件B的左上角，将align_parent_top设置为True即可。组件的位置布局可以进行组合，形成处于左上角、左下角、右上角、右下角的布局。
代码示例如下所示：
<DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="$media:bg"> <Text ohos:id="$+id:b" ohos:height="match_content" ohos:width="match_content" ohos:align_parent_top="true" ohos:background_element="#EC9DFF" ohos:margin="10vp" ohos:padding="10vp" ohos:text="我是程序猿，我在左上角飘扬" ohos:text_size="18fp"/></DependentLayout>
运行虚拟机之后的效果如下图所示：
好了，想对布局的内容就说到这了，你自己多试试其他属性，看看效果。我写下一篇其他布局去了。对了，记得关注我，赚大发。
一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，关注我，你就赚到了。我爱分享Python、前端、Java和App方面的干货了。赶紧来围观啊!!!
#鸿蒙##华为鸿蒙##头条热搜##程序员##热门#
