DependentLayout布局方法是什么

这篇文章主要讲解了“DependentLayout布局方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“DependentLayout布局方法是什么”吧！

 DependentLayout简介

DependentLayout意为相对位置布局，与DirectionalLayout相比较有更多的排布方式，每个组件可以指定相对于其他同级组件的位置，也可以指定相对于父组件的位置。可以使用DependentLayout布局来实现更加复杂的UI界面，同时也可以和其他布局相结合组合出需要的UI界面。

常用属性

相对于指定组件的位置属性

xmlns:ohos="http://schemas.huawei.com/res/ohos"  ohos:height="match_parent"  ohos:width="match_parent"  ohos:alignment="center">   ohos:id="$+id:text_01"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第一个Text."  ohos:text_size="50"  />   ohos:id="$+id:text_02"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第二个Text."  ohos:text_size="50"  ohos:above="$id:text_01"  />

将ohos:above="$id:text_01"  改为ohos:below="$id:text_01"，效果如下。

将ohos:above="$id:text_01"  改为ohos:left_of="$id:text_01"，效果如下，其他自行验证。

子组件相对于父组件的位置属性

xmlns:ohos="http://schemas.huawei.com/res/ohos"  ohos:height="match_parent"  ohos:width="match_parent"  ohos:alignment="center">   ohos:id="$+id:text_01"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第一个Text."  ohos:text_size="50"  ohos:align_parent_bottom="true"  />   ohos:id="$+id:text_02"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第二个Text."  ohos:text_size="50"  ohos:align_parent_top="true"  />   ohos:id="$+id:text_03"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第三个Text."  ohos:text_size="50"  ohos:align_parent_right="true"  />   ohos:id="$+id:text_04"  ohos:height="match_content"  ohos:width="match_content"  ohos:background_element="$graphic:background_dependent_layout"  ohos:text="我是第四个Text."  ohos:text_size="50"  ohos:center_in_parent="true"  />

示例

xmlns:ohos="http://schemas.huawei.com/res/ohos"  ohos:height="match_parent"  ohos:width="match_parent">   ohos:id="$+id:text_01"  ohos:height="70vp"  ohos:width="match_parent"  ohos:background_element="#CCCCCC"  ohos:text="Header"  ohos:text_alignment="center"  ohos:text_size="50"  ohos:align_parent_top="true"  />   ohos:id="$+id:text_02"  ohos:height="match_parent"  ohos:width="100vp"  ohos:background_element="#5C6E71"  ohos:text="LEFT"  ohos:text_alignment="center"  ohos:text_size="50"  ohos:align_parent_left="true"  ohos:below="$id:text_01"  />   ohos:id="$+id:text_03"  ohos:height="match_parent"  ohos:width="100vp"  ohos:background_element="#5C6E71"  ohos:text="Right"  ohos:text_alignment="center"  ohos:text_size="50"  ohos:align_parent_right="true"  ohos:below="$id:text_01"  />   ohos:id="$+id:text_05"  ohos:height="match_parent"  ohos:width="match_parent"  ohos:background_element="#16CCB7"  ohos:text_alignment="center"  ohos:text="Center"  ohos:text_size="50"  ohos:right_margin="100vp"  ohos:below="$id:text_01"  ohos:right_of="$id:text_02"  />   ohos:id="$+id:text_04"  ohos:height="50vp"  ohos:width="match_parent"  ohos:background_element="#CCCCCC"  ohos:text="Footer"  ohos:text_size="50"  ohos:align_parent_bottom="true"  />

感谢各位的阅读，以上就是“DependentLayout布局方法是什么”的内容了，经过本文的学习后，相信大家对DependentLayout布局方法是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！