2.2.1 DirectionalLayout

DirectionalLayout 是一種可以聲明子組件排列方向的布局，既是最基礎，也是最重要的一種布局，應用場景很廣泛，用于將組件按照水平[如圖2-8（a）所示]或垂直[如圖2-8（b）所示]兩種方向排列。

DirectionalLayout 通過 ohos：orientation 屬性控制組件的排列方向。ohos：orientation有兩個屬性值，分別是horizontal和vertical。其中，horizontal表示水平顯示，vertical表示垂直顯示，而且DirectionalLayout默認采用垂直的方式進行排列。接下來，通過配置ohos：orientation屬性來實現三個按鈕的垂直排列。

在上述代碼中，頂部的＜？xml version="1.0"encoding="utf-8"？＞聲明了XML文件的版本和字符集。

最 外 層 標 簽 為 ＜DirectionalLayout＞，表 示 這 里 使 用 的 布 局 是DirectionalLayout。布局的ohos：orientation屬性的取值設置為vertical，在布局中包含了三個按鈕，這三個按鈕會按照垂直方向排列，頁面的預覽效果如圖2-9所示。

在按鈕中，通過ohos：text屬性設置了按鈕顯示的內容，通過ohos：text_size指定了顯示內容的字號。在 HarmonyOS 中，字號可以使用三種單位設置，分別為px（像素）、vp（虛擬像素）、fp（字體像素）。其中：px為屏幕像素；vp為虛擬像素，它的大小和屏幕密度有關，它使組件尺寸在不同像素密度的設備上具有一致的視覺感受；fp 默認大小和 vp 相同，只是在設置字號后，會乘以對應的系數來計算實際顯示大小。

若將 ohos：orientation 的屬性值設置為 horizontal，則三個按鈕會按照水平方向進行排列，頁面的預覽效果如圖2-10所示。

這里的按鈕設置的寬度ohos：width和高度ohos：height都是match_content，意味著組件的寬度和高度會正好包裹其所包含的內容。寬度和高度都還有另一個屬性值，叫 match_parent，意思是與父級容器的長度或寬度保持一致。當ohos：orientation的屬性值為horizontal時，如果將上面“按鈕1”的寬度設置為match_parent，那么“按鈕1”的寬度就將整個屏幕占滿，由于屏幕已經沒有剩余空間，其余按鈕就會從屏幕右側被擠出。

例如，將“按鈕 1”的 ohos：width 屬性值設置為 match_parent，其他按鈕便沒有空間顯示。

在上面的代碼中，DirectionalLayout的排列方式設置為水平，這時將“按鈕1”的ohos：width屬性值設置為match_parent，則屏幕上只會顯示“按鈕1”，其余兩個按鈕均從屏幕右側被擠出，從而無法顯示，頁面的預覽效果如圖2-11所示。

同理，如果 ohos：orientation 的屬性值為 vertical，那么組件的高度就不能設置為match_parent，否則會影響其他組件的顯示效果。

DirectionalLayout是按照布局中組件擺放的順序依次分配空間的，先給“按鈕1”設置寬度為 match_content，這時系統已經為“按鈕 1”分配了空間，然后將“按鈕 2”的寬度設置為 match_parent，最后“按鈕 3”的寬度依然為match_content，代碼如下。

如圖2-12所示，屏幕上只顯示了“按鈕1”和“按鈕2”，且“按鈕2”的寬度為match_parent，它占據了除去“按鈕1”以外的所有右側的水平空間，“按鈕3”就沒有多余的位置可以擺放，被擠出屏幕。在本例中，DirectionalLayout被設置為水平方向，那么，match_parent 屬性計算的是水平方向剩余可用空間的大小，而非使用水平方向的所有空間來計算組件尺寸。

如果都使用match_content來指定組件的寬度，那么在排列完三個按鈕后，屏幕右側還有大片的空白位置，UI顯得不美觀。DirectionalLayout除了可以規定組件的排列方向，還可以通過 ohos：weight 空間權重屬性來設置組件所占據的空間大小。這個屬性是按比例計算組件在布局中所占空間的，可以用作對不同分辨率屏幕的適配。下面通過給 Button 設置 weight 值來設置三個按鈕的大小，以水平排列布局為例編寫代碼。

設置布局的 ohos：orientation屬性值為 horizontal，三個按鈕的 ohos：weight屬性值都為 1，則按鈕會把屏幕空間三等分進行排列。此時，組件的寬度不再由ohos：width來決定，這個時候可以將組件的ohos：width屬性值設置為0。

在計算組件寬度時，系統會把所有組件指定的ohos：weight相加得到總的權重值，然后計算每個組件的 weight 占總權重值的比例，按照比例去分配組件在DirectionalLayout中的可用空間。上面三個按鈕的weight都為1，總權重值為3，所以每個組件的寬度都是1/3屏幕寬度。頁面的預覽效果如圖2-13所示。

如果為“按鈕 3”設置了具體的寬度，那么“按鈕 1”和“按鈕 2”使用ohos：weight來設置寬度又會如何呢？我們看一下下面的例子。

圖2-14為頁面的預覽效果圖。從圖2-14中可以看到，“按鈕3”占據了右側的空間，而“按鈕1”和“按鈕2”平分了左側的剩余空間。

DirectionalLayout還有一個特有屬性，叫ohos：total_weight。它可以指定布局的總權重值totalWeight。這時，用于計算DirectionalLayout中組件尺寸的權重值不再由所有子組件的 weight 加和得到。每個組件所占用的空間都由計算得到。其中，式子的分子中使用的是屏幕可用寬（高）度，也就是說，在使用weight按比例來計算組件寬（高）度時，使用的不是屏幕在寬或高方向的總尺寸，而是使用減去已被其他組件占用后的屏幕剩余空間。我們看一下下面的例子。

在上述代碼中，外層的 DirectionalLayout增加了 ohos：total_weight屬性，取值為5。布局中包含“按鈕1”“按鈕2”“按鈕3”三個按鈕，其中“按鈕1”“按鈕 2”的 ohos：weight 設置為2，“按鈕 3”指定具體的寬度為150vp。頁面的預覽效果如圖2-15所示。

系統首先為“按鈕 3”分配空間，“按鈕1”和“按鈕2”的寬度各為剩余空間的2/5，在“按鈕 3”右側有剩余的空白區域，空白區域為剩余空間的1/5。

在DirectionalLayout中，組件 的 位 置 還 可 以 通 過ohos：layout_alignment 屬性來指定。組件可以通過這個屬性來決定自己在DirectionalLayout中的對齊方式。layout_alignment屬性值見表2-1。

但是當 DirectionalLayout的對齊方式與通過 ohos：layout_alignment屬性配置的組件的排列方式一致時，對齊方式不會生效。我們看一下下面的例子。

可以看到，當DirectionalLayout的方向設置為水平時，“按鈕1”的位置可以通過 layout_alignment 屬性設置為垂直居中，“按鈕 2”的位置為“top”，在屏幕頂部，“按鈕 3”的位置為“bottom”，在屏幕底部，頁面的預覽效果如圖2-16所示。

但 如 果 設 置 ohos：layout_alignment 為 “horizontal_center”，由 于ohos：orientation的屬性值為horizontal，而ohos：layout_alignment的對齊方式也指定的是水平方向，那么這個屬性不會起作用，因為下一個組件要水平排列，水平方向就不再允許組件通過layout_alignment調整位置。

圖2-17為頁面的預覽效果圖。從圖2-17中可以看到，“按鈕1”回到了左上角的位置。ohos：layout_alignment的值并未起作用。

除了用XML文件的方式聲明DirectionalLayout，還可以通過Java代碼創建 DirectionalLayout。下面這段代碼的效果和在＜DirectionalLayout＞中用 XML屬性聲明的效果是一樣的。