鴻蒙開發(fā)-序言
鴻蒙開發(fā)-工具
鴻蒙開發(fā)-初體驗
鴻蒙開發(fā)-運行機制
鴻蒙開發(fā)-運行機制-Stage模型
鴻蒙開發(fā)-UI
鴻蒙開發(fā)-UI-組件
鴻蒙開發(fā)-UI-組件-狀態(tài)管理
鴻蒙開發(fā)-UI-應(yīng)用-狀態(tài)管理
鴻蒙開發(fā)-UI-渲染控制
文章目錄
前言
一、布局概述
1.布局結(jié)構(gòu)
2.布局元素組成
3.布局分類
4.布局位置
5.布局子元素的約束
總結(jié)
前言
上文我們學(xué)習(xí)記錄鴻蒙開發(fā)中的UI渲染相關(guān)的知識點，深入學(xué)習(xí)了條件渲染、循環(huán)渲染的使用方法，以及數(shù)據(jù)懶加載。本文學(xué)習(xí)鴻蒙開發(fā)UI布局相關(guān)的知識。
一、布局概述
在聲明式UI中，所有的頁面都是由自定義組件構(gòu)成，組件按照布局的要求依次排列，最終構(gòu)成UI頁面。
布局指用特定的組件或者屬性來管理用戶頁面所放置UI組件的大小和位置。
頁面布局的合理流程：
1.布局結(jié)構(gòu)
布局的結(jié)構(gòu)通常是分層級的，代表了用戶界面中的整體架構(gòu)。
一個常見的頁面結(jié)構(gòu)如下所示
Page表示頁面的根節(jié)點，Column/Row等元素為系統(tǒng)組件。針對不同的頁面結(jié)構(gòu)，ArkUI提供了不同的布局組件來實現(xiàn)對應(yīng)布局的效果
2.布局元素組成
布局相關(guān)的容器組件可形成對應(yīng)的布局效果
布局元素組成圖如下所示
組件區(qū)域（藍區(qū)方塊）：組件區(qū)域表明組件的大小，width、height屬性設(shè)置該區(qū)域的大小。
組件內(nèi)容區(qū)（黃色方塊）：組件區(qū)域大小減去組件的border值，組件內(nèi)容區(qū)大小會作為組件內(nèi)容（或者子組件）進行大小測算時的布局測算限制。
組件內(nèi)容（綠色方塊）：組件內(nèi)容本身占用的大小，比如文本內(nèi)容占用的大小。組件內(nèi)容和組件內(nèi)容區(qū)不一定匹配，比如設(shè)置了固定的width和height，此時組件內(nèi)容的大小就是設(shè)置的width和height減去padding和border值，但文本內(nèi)容則是通過文本布局引擎測算后得到的大小，可能出現(xiàn)文本真實大小小于設(shè)置的組件內(nèi)容區(qū)大小。當(dāng)組件內(nèi)容和組件內(nèi)容區(qū)大小不一致時，align屬性生效，定義組件內(nèi)容在組件內(nèi)容區(qū)的對齊方式，如居中對齊。
組件布局邊界（虛線部分）：組件通過margin屬性設(shè)置外邊距時，組件布局邊界就是組件區(qū)域加上margin的大小。
做過UI開發(fā)的同學(xué)應(yīng)該對這幾個屬性margin border padding應(yīng)該非常好理解，考慮到開發(fā)的通用性，以及便于技術(shù)棧轉(zhuǎn)型，這里UI布局相關(guān)的屬性都是CSS布局中保持一致的，對于沒有前端開發(fā)經(jīng)驗的同學(xué)，把組件占用的區(qū)域，使用盒子模型能更好理解。
3.布局分類
聲明式UI提供了以下8種常見布局
4.布局位置
布局容器相對于自身或其他組件的位置，通過position、offset等屬性控制
| 定位能力 |
使用場景 |
實現(xiàn)方式 |
|---|---|---|
| 絕對定位 |
對于不同尺寸的設(shè)備，使用絕對定位的適應(yīng)性會比較差，在屏幕的適配上有缺陷。 |
使用position實現(xiàn)絕對定位，設(shè)置元素左上角相對于父容器左上角偏移位置。在布局容器中，設(shè)置該屬性不影響父容器布局，僅在繪制時進行位置調(diào)整。 |
| 相對定位 |
相對定位不脫離文檔流，即原位置依然保留，不影響元素本身的特性，僅相對于原位置進行偏移。 |
使用offset可以實現(xiàn)相對定位，設(shè)置元素相對于自身的偏移量。設(shè)置該屬性，不影響父容器布局，僅在繪制時進行位置調(diào)整。 |
絕對定位案例：
注：根據(jù)組件定義的順序，使用position定位的組件會覆蓋在其前面定義的組件，但是對其后定義的組件沒有影響。
相對定位案例：
5.布局子元素的約束
| 對子元素的約束能力 |
使用場景 |
實現(xiàn)方式 |
|---|---|---|
| 拉伸 |
容器組件尺寸發(fā)生變化時，增加或減小的空間全部分配給容器組件內(nèi)指定區(qū)域。 |
flexGrow和flexShrink屬性：
|
| 縮放 |
子組件的寬高按照預(yù)設(shè)的比例，隨容器組件發(fā)生變化，且變化過程中子組件的寬高比不變。 |
aspectRatio屬性指定當(dāng)前組件的寬高比來控制縮放，公式為：aspectRatio=width/height。 |
| 占比 |
占比能力是指子組件的寬高按照預(yù)設(shè)的比例，隨父容器組件發(fā)生變化。 |
基于通用屬性的兩種實現(xiàn)方式： 1. 將子組件的寬高設(shè)置為父組件寬高的百分比。 2.?layoutWeight屬性，使得子元素自適應(yīng)占滿剩余空間。 |
| 隱藏 |
隱藏能力是指容器組件內(nèi)的子組件，按照其預(yù)設(shè)的顯示優(yōu)先級，隨容器組件尺寸變化顯示或隱藏，其中相同顯示優(yōu)先級的子組件同時顯示或隱藏。 |
通過displayPriority屬性來控制頁面的顯示和隱藏。文章來源：http://www.zghlxwxcb.cn/news/detail-792403.html |
總結(jié)
本文學(xué)習(xí)了鴻蒙開發(fā)UI布局相關(guān)的知識，鴻蒙開發(fā)的UI布局技術(shù)?；九c目前前端開發(fā)主流技術(shù)棧是一致的，這樣可以易化前端開發(fā)的技術(shù)轉(zhuǎn)型。本文簡單了解了鴻蒙開發(fā)中使用頻率最高的布局分類，后面會詳細學(xué)習(xí)每種布局容器的使用。文章來源地址http://www.zghlxwxcb.cn/news/detail-792403.html
到了這里，關(guān)于鴻蒙開發(fā)-UI-布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
