一、概述
布局是指對頁面組件進行排列和定位的過程,其目的是有效地組織和展示頁面內容,會涉及到組件的大小、位置以及它們之間的相互關系等等。
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