DirectionalLayout 是什么

DirectionalLayout 是定向布局，控件水平或垂直排列(類似Android 的線性布局不過還是有區(qū)別的)

DirectionalLayout的自有XML屬性

屬性名稱	中文描述	取值	取值說明	使用案例
alignment	對齊方式	left	表示左對齊。	可以設(shè)置取值項(xiàng)如表中所列，也可以使用“|”進(jìn)行多項(xiàng)組合。 ohos:alignment="top|left" ohos:alignment="left"
		top	表示頂部對齊。
		right	表示右對齊。
		bottom	表示底部對齊。
		horizontal_center	表示水平居中對齊。
		vertical_center	表示垂直居中對齊。
		center	表示居中對齊。
		start	表示靠起始端對齊。
		end	表示靠結(jié)束端對齊。
orientation	子布局排列方向	horizontal	表示水平方向布局。	ohos:orientation="horizontal"
		vertical	表示垂直方向布局。	ohos:orientation="vertical"
total_weight	所有子視圖的權(quán)重之和	float類型	可以直接設(shè)置浮點(diǎn)數(shù)值，也可以引用float浮點(diǎn)數(shù)資源。	ohos:total_weight="2.5" ohos:total_weight="$float:total_weight"

DirectionalLayout 自有屬性 alignment

1 底部對齊

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

效果圖

2 右邊對齊

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

效果圖

3 居中

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

效果圖

4 右下角

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

這里就先了解這幾個(gè)

DirectionalLayout 自有屬性 orientation

orientation設(shè)置布局內(nèi)組件的排列方式的屬性是 ,如果沒有設(shè)置默認(rèn)為垂直排列

控制垂直排列的屬性為 ohos:orientation="vertical"

控制水平排列的屬性為ohos:orientation="horizontal"

orientation設(shè)置垂直排列

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="120vp"ohos:top_margin="10vp"ohos:background_element="#00d8a0"ohos:text_size="20fp"ohos:text="Java"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="120vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"ohos:top_margin="10vp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="120vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:top_margin="10vp"/></DirectionalLayout>

效果如下

orientation 水平排列

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"><Buttonohos:id="$+id:button1"ohos:height="60vp"ohos:width="100vp"ohos:top_margin="10vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text_size="20fp"ohos:text="Java"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="100vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"ohos:top_margin="10vp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="100vp"ohos:left_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"ohos:top_margin="10vp"/></DirectionalLayout>

效果如下

DirectionalLayout 自有屬性 total_weight

這個(gè)屬性有意思就是子內(nèi)容權(quán)重?cái)?shù)之和，感覺可以不設(shè)置，這里設(shè)置了就限制了子內(nèi)容自己要設(shè)置的數(shù)值了，假如在DirectionalLayout 設(shè)置為2 子內(nèi)容剛好有2個(gè)內(nèi)容的話可以設(shè)置數(shù)值為1，如果設(shè)置1 子內(nèi)容2個(gè)子內(nèi)容不許設(shè)置0.5 如果設(shè)置子內(nèi)容設(shè)置1的話就顯示1個(gè)內(nèi)容了，個(gè)人目前感覺沒有特別的需求不要設(shè)置它了，因?yàn)椴辉O(shè)置total_weight也不影響使用權(quán)重，

下面截圖說下自己是實(shí)驗(yàn)了的

下面沒有設(shè)置total_weight正常的情況

底部使用的是1 ，如果total_weight 設(shè)置為3 效果合理，如果我設(shè)置為2，或者1 那就行了如下

total_weight 會把子內(nèi)容權(quán)重的值限制了(這里解釋下就是子內(nèi)容weight的值有時(shí)候我想沒一個(gè)設(shè)置2，或者0.5之類，還需要算號里面權(quán)重的的和在寫到外層去，現(xiàn)在是不寫也能實(shí)現(xiàn)的想要的功能)

DirectionalLayout所包含組件可支持的XML屬性

屬性名稱	中文描述	取值	取值說明	使用案例
layout_alignment	對齊方式	left	表示左對齊。	可以設(shè)置取值項(xiàng)如表中所列，也可以使用“|”進(jìn)行多項(xiàng)組合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left"
		top	表示頂部對齊。
		right	表示右對齊。
		bottom	表示底部對齊。
		horizontal_center	表示水平居中對齊。
		vertical_center	表示垂直居中對齊。
		center	表示居中對齊。
weight	比重	float類型	可以直接設(shè)置浮點(diǎn)數(shù)值，也可以引用float浮點(diǎn)數(shù)資源。	ohos:weight="1" ohos:weight="$float:weight"

DirectionalLayout所包含組件可支持的XML屬性：layout_alignment

這個(gè)屬性需要特別注意呢

當(dāng)orientation 設(shè)置水平的時(shí)候左右無效果的看下圖

所以使用的時(shí)候需要注意orientation 設(shè)置的屬性，下面的設(shè)置垂直的時(shí)候可以使用左右

同樣的道理當(dāng)orientation 設(shè)置垂直的上和下的屬性就不能使用了

個(gè)人試了多次總結(jié)情況大致如下：

當(dāng) ohos:orientation="vertical" 可以使用layout_alignment可以使用的屬性有l(wèi)eft,right,center，horizontal_center(水平居中)，其他情況無效

當(dāng)ohos:orientation="orientation" 可以使用layout_alignment可以使用的屬性有top,botton,center，vertical_center(垂直居中),其他情況無效

DirectionalLayout所包含組件可支持的XML屬性：weight(權(quán)重)

水平方向的權(quán)重

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="horizontal"><Buttonohos:id="$+id:button1"ohos:height="60fp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="60vp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="60vp"ohos:width="0"ohos:weight="1"ohos:left_margin="10vp"ohos:right_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/></DirectionalLayout>

效果圖

垂直方向的權(quán)重

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="200vp"ohos:width="match_parent"ohos:orientation="vertical"><Buttonohos:id="$+id:button1"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Java"ohos:text_size="20fp"/><Buttonohos:id="$+id:button2"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="Android"ohos:text_size="20fp"/><Buttonohos:id="$+id:button3"ohos:height="0"ohos:width="120fp"ohos:weight="1"ohos:top_margin="10vp"ohos:bottom_margin="10vp"ohos:background_element="#00d8a0"ohos:text="HarmonyOS"ohos:text_size="20fp"/></DirectionalLayout>

效果圖

,

官方參考連接地址

其他的布局

HarmonyOS UI開發(fā) DependentLayout(依賴布局) 的使用

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

HarmonyOS UI開發(fā) AdaptiveBoxLayout(自適應(yīng)盒子布局) 的使用

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

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

總結(jié)

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

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