鴻蒙HarmonyOS NEXT開發:常用布局及實用技巧

一、概述

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

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
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容