一、DirectionalLayout

• DirectionalLayout 是 Java UI 中的一種重要組件布局，用于將一組組件(Component)按照水平或者垂直方向排布，能夠方便地對齊布局內(nèi)的組件。該布局和其他布局的組合，可以實現(xiàn)更加豐富的布局方式。
• DirectionalLayout 示意如下：

二、支持的 XML 屬性

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

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

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

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

三、排列方式

• DirectionalLayout 的排列方向（orientation）分為水平（horizontal）或者垂直（vertical）方向。
• 使用 orientation 設(shè)置布局內(nèi)組件的排列方式，默認(rèn)為垂直排列。

① 垂直排列

• 垂直方向排列三個按鈕，效果如下：

• 示例代碼如下：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• 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>

② 水平排列

• 水平方向排列三個按鈕，效果如下：

• 示例代碼：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• 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>

• DirectionalLayout 不會自動換行，其子組件會按照設(shè)定的方向依次排列，若超過布局本身的大小，超出布局大小的部分將不會被顯示，例如：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• 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>

• 此布局包含了三個按鈕，但由于 DirectionalLayout 不會自動換行，超出布局大小的組件部分無法顯示。界面顯示如下：

四、對齊方式

• DirectionalLayout 中的組件使用 layout_alignment 控制自身在布局中的對齊方式，當(dāng)對齊方式與排列方式方向一致時，對齊方式不會生效，如設(shè)置了水平方向的排列方式，則左對齊、右對齊將不會生效。
• 三種對齊方式的示例代碼：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout>

• 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>

• 三種對齊方式效果示例：

五、權(quán)重

• 權(quán)重（weight）就是按比例來分配組件占用父組件的大小，在水平布局下計算公式為：
  父布局可分配寬度=父布局寬度-所有子組件 width 之和；
  組件寬度=組件 weight /所有組件 weight 之和*父布局可分配寬度；
• 實際使用過程中，建議使用 width=0 來按比例分配父布局的寬度，1:1:1效果如下：

• 示例代碼：

<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout>

• 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>

• 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>

六、場景示例

• 源碼示例：

<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:width="match_parent"ohos:height="match_parent"ohos:background_element="$graphic:color_light_gray_element"><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="vertical"><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:bottom_margin="3vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="33vp"ohos:height="20vp"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="20vp"ohos:orientation="horizontal"><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 2"/><Buttonohos:width="166vp"ohos:height="match_content"ohos:left_margin="13vp"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="60vp"><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="left"ohos:text="Button 1"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="horizontal_center"ohos:text="Button 2"/><Buttonohos:width="50vp"ohos:height="20vp"ohos:background_element="$graphic:color_cyan_element"ohos:layout_alignment="right"ohos:text="Button 3"/></DirectionalLayout><Component ohos:height="20vp"/><DirectionalLayoutohos:width="match_parent"ohos:height="match_content"ohos:orientation="horizontal"><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 1"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_gray_element"ohos:text="Button 2"/><Buttonohos:width="0vp"ohos:height="20vp"ohos:weight="1"ohos:background_element="$graphic:color_cyan_element"ohos:text="Button 3"/></DirectionalLayout> </DirectionalLayout>

總結(jié)

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

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