文章目錄

• 一、相對布局 DependentLayout 常用屬性
• 二、相對布局 DependentLayout 示例

一、相對布局 DependentLayout 常用屬性

---

相對布局 DependentLayout 常用屬性 :

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

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

在某組件左側 : ohos:left_of=""

在某組件右側 : ohos:right_of=""

在父容器左側 : ohos:align_parent_left=""

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

在父容器右側 : ohos:align_parent_right=""

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

與某組件左側對齊 : ohos:align_left=""

與某組件頂部對齊 : ohos:align_top=""

與某組件右側對齊 : ohos:align_right=""

與某組件底部對齊 : ohos:align_bottom=""

二、相對布局 DependentLayout 示例

---

下面的相對布局中 text1 組件沒有設置任何位置屬性 , 默認放在屏幕左上角 ;

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

text3 組件在父容器的底部 , 為 text3 組件設置 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"><!-- 默認位置 --><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>

布局運行效果 :

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。