一、概述

布局是指對頁面組件進行排列和定位的過程，其目的是有效地組織和展示頁面內容，會涉及到組件的大小、位置以及它們之間的相互關系等等。

476d20.jpg

二、盒子模型

在鴻蒙應用中，頁面上的每個組件都可以看做是一個矩形的盒子，這個盒子包含了內容區域（content）、邊框（border）、內邊距（padding）和外邊距（margin），各部分內容如下圖所示

fb94b592d3.jpg

三、線性布局（Column/Row）

線性布局（LinearLayout）是開發中最常用的布局，可通過容器組件Column和Row構建，其子組件會在垂直或者水平方向上進行線性排列，具體效果如下圖所示

afe07ef1de59410baadeee04c10b8480.png

1、space屬性

Column和Row容器的參數類型為{space?: string | number}，開發者可通過space屬性調整子元素在主軸方向上的間距，效果如下

01f431e2c7514b8887b403cf0be70649.png

2、justifyContent屬性

子元素沿主軸方向的排列方式可以通過justifyContent()方法進行設置，其參數類型為枚舉類型FlexAlign，可選的枚舉值有

1bbb1e5d72da440ead9b49b8568f2b67.png

3、alignItems屬性

子元素沿交叉軸方向的對齊方式可以通過alignItems()方法進行設置，其參數類型，對于Column容器來講是HorizontalAlign，對于Row容器來講是VerticalAlign，兩者都是枚舉類型，可選擇枚舉值也都相同，具體內容如下

15307c067929482590212ae3f45a94b3.png

四、實用技巧

1、Blank組件的使用

Blank可作為Column和Row容器的子組件，該組件不顯示任何內容，并且會始終充滿容器主軸方向上的剩余空間，效果如下：

949afadcf14d4759967231df2d119eae.png

2、layoutWeight屬性的使用

layoutWeight屬性可用于Column和Row容器的子組件，其作用是配置子組件在主軸方向上的尺寸權重。配置該屬性后，子組件沿主軸方向的尺寸設置（width或height）將失效，具體尺寸根據權重進行計算，計算規則如下圖所示：

ebf062a699184f1b88a84aa50c797f17.png