想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

 DependentLayout簡(jiǎn)介

DependentLayout意為相對(duì)位置布局，與DirectionalLayout相比較有更多的排布方式，每個(gè)組件可以指定相對(duì)于其他同級(jí)組件的位置，也可以指定相對(duì)于父組件的位置?？梢允褂肈ependentLayout布局來(lái)實(shí)現(xiàn)更加復(fù)雜的UI界面，同時(shí)也可以和其他布局相結(jié)合組合出需要的UI界面。

常用屬性

相對(duì)于指定組件的位置屬性

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="我是第一個(gè)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="我是第二個(gè)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"，效果如下，其他自行驗(yàn)證。

子組件相對(duì)于父組件的位置屬性

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="我是第一個(gè)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="我是第二個(gè)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="我是第三個(gè)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="我是第四個(gè)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" 
 
/> 

至此，我們已經(jīng)了解并會(huì)使用HarmonyOS Java UI的六大布局，下一節(jié)我們將對(duì)六大布局進(jìn)行總結(jié)，并將前面沒(méi)有提到的各類屬性做詳細(xì)的歸納。

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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