想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

 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" 
 
/> 

至此，我們已經了解并會使用HarmonyOS Java UI的六大布局，下一節我們將對六大布局進行總結，并將前面沒有提到的各類屬性做詳細的歸納。

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz