文章目錄

• 一、相對(duì)布局 DependentLayout 常用屬性
• 二、相對(duì)布局 DependentLayout 示例

一、相對(duì)布局 DependentLayout 常用屬性

---

相對(duì)布局 DependentLayout 常用屬性 :

在某組件下方 : ohos:below=""

在某組件上方 : ohos:above=""

在某組件左側(cè) : ohos:left_of=""

在某組件右側(cè) : ohos:right_of=""

在父容器左側(cè) : ohos:align_parent_left=""

在父容器頂部 : ohos:align_parent_top=""

在父容器右側(cè) : ohos:align_parent_right=""

在父容器底部 : ohos:align_parent_bottom=""

與某組件左側(cè)對(duì)齊 : ohos:align_left=""

與某組件頂部對(duì)齊 : ohos:align_top=""

與某組件右側(cè)對(duì)齊 : ohos:align_right=""

與某組件底部對(duì)齊 : ohos:align_bottom=""

二、相對(duì)布局 DependentLayout 示例

---

下面的相對(duì)布局中 text1 組件沒(méi)有設(shè)置任何位置屬性 , 默認(rèn)放在屏幕左上角 ;

text2 組件在 text1 組件下面 , 為 text2 組件設(shè)置 ohos:below="$+id:text1" 屬性 , 即可將本組件放置在 text1 組件下方 ;

text3 組件在父容器的底部 , 為 text3 組件設(shè)置 ohos:align_parent_bottom=“true” 屬性 , 即可將本組件放置在父容器底部 ;

<?xml version="1.0" encoding="utf-8"?> <DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><!-- 默認(rèn)位置 --><Textohos:id="$+id:text1"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#FF0000"ohos:layout_alignment="horizontal_center"ohos:text=" Hello World 1 "ohos:text_size="50"/><!-- 放在 text1 組件底部 --><Textohos:id="$+id:text2"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#00FF00"ohos:layout_alignment="horizontal_center"ohos:below="$+id:text1"ohos:text=" Hello World 2 "ohos:text_size="50"/><!-- 放在父組件底部 --><Textohos:id="$+id:text3"ohos:height="match_content"ohos:width="match_content"ohos:background_element="#0000FF"ohos:layout_alignment="horizontal_center"ohos:align_parent_bottom="true"ohos:text=" Hello World 3 "ohos:text_size="50"/></DependentLayout>

布局運(yùn)行效果 :

總結(jié)

以上是生活随笔為你收集整理的【鸿蒙 HarmonyOS】UI 布局 ( 相对布局 DependentLayout )的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。