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布局方法是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！