一、DependentLayout 簡介

• DependentLayout 是 Java UI 系統里的一種常見布局。與DirectionalLayout 相比，擁有更多的排布方式，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。
• DirectionalLayout 布局方式，請參考我的博客：HarmonyOS之常用布局DirectionalLayout的使用。
• DependentLayout 布局示意如下：

二、支持的 XML 屬性

• DependentLayout 的共有 XML 屬性繼承自 Component，詳情請參考我的博客：HarmonyOS之組件通用的XML屬性總覽。
• DependentLayout 的自有 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例alignment對齊方式left表示左對齊可以設置取值項如表中所列，也可以使用“|”進行多項組合。
ohos:alignment="top|left"
ohos:alignment="left"top表示頂部對齊left表示左對齊bottom表示底部對齊horizontal_center表示水平居中對齊vertical_center表示垂直居中對齊center表示居中對齊

• DependentLayout 所包含組件可支持的 XML 屬性見下表：

屬性名稱中文描述取值取值說明使用案例left_of將右邊緣與另一個子組件的左邊緣對齊引用僅可引用DependentLayout中包含的其他組件的idohos:left_of="$id:component_id"right_of將左邊緣與另一個子組件的右邊緣對齊ohos:right_of="$id:component_id"start_of將結束邊與另一個子組件的起始邊對齊ohos:start_of="$id:component_id"end_of將起始邊與另一個子組件的結束邊對齊ohos:end_of="$id:component_id"above將下邊緣與另一個子組件的上邊緣對齊ohos:above="$id:component_id"below將上邊緣與另一個子組件的下邊緣對齊ohos:below="$id:component_id"align_baseline將子組件的基線與另一個子組件的基線對齊ohos:align_baseline="$id:component_id"align_left將左邊緣與另一個子組件的左邊緣對齊ohos:align_left="$id:component_id"align_top將上邊緣與另一個子組件的上邊緣對齊ohos:align_top="$id:component_id"align_right將右邊緣與另一個子組件的右邊緣對齊ohos:align_right="$id:component_id"align_bottom將底邊與另一個子組件的底邊對齊ohos:align_bottom="$id:component_id"align_start將起始邊與另一個子組件的起始邊對齊ohos:align_start="$id:component_id"align_end將結束邊與另一個子組件的結束邊對齊ohos:align_end="$id:component_id"align_parent_left將左邊緣與父組件的左邊緣對齊boolean類型可以直接設置true/false，也可以引用boolean資源ohos:align_parent_left="true"
ohos:align_parent_left="$boolean:true"align_parent_top將上邊緣與父組件的上邊緣對齊ohos:align_parent_top="true"
ohos:align_parent_top="$boolean:true"align_parent_right將右邊緣與父組件的右邊緣對齊ohos:align_parent_right="true"
ohos:align_parent_right="$boolean:true"align_parent_bottom將底邊與父組件的底邊對齊ohos:align_parent_bottom="true"
ohos:align_parent_bottom="$boolean:true"align_parent_start將起始邊與父組件的起始邊對齊ohos:align_parent_start="true"
ohos:align_parent_start="$boolean:true"align_parent_end將結束邊與父組件的結束邊對齊ohos:align_parent_end="true"
ohos:align_parent_end="$boolean:true"center_in_parent將子組件保持在父組件的中心ohos:center_in_parent="true"
ohos:center_in_parent="$boolean:true"horizontal_center將子組件保持在父組件水平方向的中心ohos:horizontal_center="true"
ohos:horizontal_center="$boolean:true"vertical_center將子組件保持在父組件垂直方向的中心ohos:vertical_center="true"
ohos:vertical_center="$boolean:true"

三、排列方式

• DependentLayout 的排列方式是相對于其他同級組件或者父組件的位置進行布局。

① 相對于同級組件

• end_of
• • 如下圖所示：

• • 示例代碼：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_content"ohos:height="match_content"ohos:background_element="$graphic:color_light_gray_element"><Textohos:id="$+id:text1"ohos:width="match_content"ohos:height="match_content"ohos:left_margin="15vp"ohos:top_margin="15vp"ohos:bottom_margin="15vp"ohos:text="text1"ohos:text_size="20fp"ohos:background_element="$graphic:color_cyan_element"/><Textohos:id="$+id:text2"ohos:width="match_content"ohos:height="match_content"ohos:left_margin="15vp"ohos:top_margin="15vp"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:text="end_of text1"ohos:text_size="20fp"ohos:background_element="$graphic:color_cyan_element"ohos:end_of="$id:text1"/></DependentLayout>

• • color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#EDEDED"/></shape>

• • color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• below
• • 如下圖所示：

• • 示例代碼：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_content"ohos:height="match_content"ohos:background_element="$graphic:color_light_gray_element"><Textohos:id="$+id:text1"ohos:width="match_content"ohos:height="match_content"ohos:left_margin="15vp"ohos:top_margin="15vp"ohos:right_margin="40vp"ohos:text="text1"ohos:text_size="20fp"ohos:background_element="$graphic:color_cyan_element"/><Textohos:id="$+id:text2"ohos:width="match_content"ohos:height="match_content"ohos:left_margin="15vp"ohos:top_margin="15vp"ohos:right_margin="40vp"ohos:bottom_margin="15vp"ohos:text="below text1"ohos:text_size="20fp"ohos:background_element="$graphic:color_cyan_element"ohos:below="$id:text1"/></DependentLayout>

• • color_light_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#EDEDED"/></shape>

• • color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

• 其他的 above、start_of、left_of、right_of 等參數可分別實現類似的布局。

② 相對于父組件

• 以上位置布局可以組合，形成處于左上角、左下角、右上角、右下角的布局，如下：

• 示例代碼：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="300vp"ohos:height="100vp"ohos:background_element="$graphic:color_background_gray_element"><Textohos:id="$+id:text6"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_right"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_right="true"ohos:center_in_parent="true"/><Textohos:id="$+id:text7"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_bottom"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_bottom="true"ohos:center_in_parent="true"/><Textohos:id="$+id:text8"ohos:width="match_content"ohos:height="match_content"ohos:text="center_in_parent"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:center_in_parent="true"/><Textohos:id="$+id:text9"ohos:width="match_content"ohos:height="match_content"ohos:text="align_parent_left_top"ohos:text_size="12fp"ohos:background_element="$graphic:color_cyan_element"ohos:align_parent_left="true"ohos:align_parent_top="true"/></DependentLayout>

• color_background_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#ffbbbbbb"/></shape>

• color_cyan_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#00FFFD"/></shape>

四、場景示例

• 使用 DependentLayout 可以輕松實現內容豐富的布局，如下圖所示：

• 源碼示例：

<?xml version="1.0" encoding="utf-8"?><DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:background_element="$graphic:color_background_gray_element"><Textohos:id="$+id:text1"ohos:width="match_parent"ohos:height="match_content"ohos:text_size="25fp"ohos:top_margin="15vp"ohos:left_margin="15vp"ohos:right_margin="15vp"ohos:background_element="$graphic:color_gray_element"ohos:text="Title"ohos:text_weight="1000"ohos:text_alignment="horizontal_center"/><Textohos:id="$+id:text2"ohos:width="match_content"ohos:height="120vp"ohos:text_size="10fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Catalog"ohos:top_margin="15vp"ohos:left_margin="15vp"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:align_parent_left="true"ohos:text_alignment="center"ohos:multiple_lines="true"ohos:below="$id:text1"ohos:text_font="serif"/><Textohos:id="$+id:text3"ohos:width="match_parent"ohos:height="120vp"ohos:text_size="25fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Content"ohos:top_margin="15vp"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:text_alignment="center"ohos:below="$id:text1"ohos:end_of="$id:text2"ohos:text_font="serif"/><Buttonohos:id="$+id:button1"ohos:width="70vp"ohos:height="match_content"ohos:text_size="15fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Previous"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:below="$id:text3"ohos:left_of="$id:button2"ohos:italic="false"ohos:text_weight="5"ohos:text_font="serif"/><Buttonohos:id="$+id:button2"ohos:width="70vp"ohos:height="match_content"ohos:text_size="15fp"ohos:background_element="$graphic:color_gray_element"ohos:text="Next"ohos:right_margin="15vp"ohos:bottom_margin="15vp"ohos:align_parent_end="true"ohos:below="$id:text3"ohos:italic="false"ohos:text_weight="5"ohos:text_font="serif"/></DependentLayout>

• color_background_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#ffbbbbbb"/></shape>

• color_gray_element.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#878787"/></shape> 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的HarmonyOS之常用布局DependentLayout的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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