DependentLayout是什么

DependentLayout是依賴布局，每個組件可以指定相對于其他同級元素的位置，或者指定相對于父組件的位置。(類似Android的相對布局)

DependentLayout 學習應該從3點著手? 1 自身屬性2相對與其它同級控件進行布局 3 相對父組件進行布局

?DependentLayout的自有XML屬性

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

DependentLayout的自有XML屬性??alignment

1 右邊對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

?效果圖

2 底部對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖

3 居中

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="center"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖?

4 右下角

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:alignment="right|bottom"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/></DependentLayout>

效果圖

DependentLayout所包含組件可支持的XML屬

2 相對其他同級控件 的屬性有

left_of? ：? ?將右邊緣與另一個子組件的左邊緣對齊
right_of? ：? 將左邊緣與另一個子組件的右邊緣對齊
start_of? ?： 將結束邊與另一個子組件的起始邊對齊?? ?
end_of? ?： 將起始邊與另一個子組件的結束邊對齊?? ?
above? ?： 將下邊緣與另一個子組件的上邊緣對齊
below? ? ：將上邊緣與另一個子組件的下邊緣對齊
align_baseline ：? ?將子組件的基線與另一個子組件的基線對齊
align_left? ? ? ?： 將左邊緣與另一個子組件的左邊緣對齊
align_top? ? ? ?： 將上邊緣與另一個子組件的上邊緣對齊
align_right? ? ： 將右邊緣與另一個子組件的右邊緣對齊
align_bottom? ?：? 將底邊與另一個子組件的底邊對齊
align_start? ? ： 將起始邊與另一個子組件的起始邊對齊

將右邊緣與另一個子組件的左邊緣對齊2.1 left_of

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:left_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

效果圖

2.2 right_of

將左邊緣與另一個子組件的右邊緣對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:horizontal_center="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:right_of="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

?效果圖：

?2.3 below?

將上邊緣與另一個子組件的下邊緣對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="120fp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:below="$id:button1"ohos:top_margin="20fp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

例如下圖Android 在java 的下面

2.4?align_right

將右邊緣與另一個子組件的右邊緣對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="300fp"ohos:background_element="#ddd333"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60fp"ohos:width="120fp"ohos:align_right="$id:button2"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:weight="2"/></DependentLayout>

效果圖

其他的幾種情況類似

3 相對父類組件進行布局的屬性有

align_parent_left?? ?將左邊緣與父組件的左邊緣對齊
align_parent_top?? ?將上邊緣與父組件的上邊緣對齊
align_parent_right?? ?將右邊緣與父組件的右邊緣對齊
align_parent_bottom 將底邊與父組件的底邊對齊
align_parent_start?? ?將起始邊與父組件的起始邊對齊?? ?
align_parent_end?? ?將結束邊與父組件的結束邊對齊

3.1 align_parent_right 將右邊緣與父組件的右邊緣對齊

? ?它的作用和align_parent_end 作用相同

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_right="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.2?align_parent_left?將左邊緣與父組件的左邊緣對齊

?它的作用和align_parent_start?作用相同

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_left="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.3?align_parent_top?將上邊緣與父組件的上邊緣對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_top="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.4?align_parent_bottom?

將底邊與父組件的底邊對齊

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:align_parent_bottom="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

3.5 center_in_parent

將子組件保持在父組件的中心

<?xml version="1.0" encoding="utf-8"?>
<DependentLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"><Buttonohos:id="$+id:button2"ohos:height="60fp"ohos:width="120fp"ohos:center_in_parent="true"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/></DependentLayout>

效果圖

把所有的屬性都試了一遍，會Android開發的話，這個就簡單多了，屬性上基本都一樣。

HarmonyOS UI開發 TableLayout(表格布局) 的使用

HarmonyOS UI開發 AdaptiveBoxLayout(自適應盒子布局) 的使用

HarmonyOS UI開發 PositionLayout(位置布局) 的使用

HarmonyOS UI開發 TableLayout(表格布局) 的使用

HarmonyOS UI開發 DirectionalLayout(定向布局) 的使用???????

總結

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

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