一、布局概述
布局指用特定的組件或者屬性來(lái)管理用戶頁(yè)面所放置UI組件的大小和位置。在實(shí)際的開(kāi)發(fā)過(guò)程中，需要遵守以下流程保證整體的布局效果
- 確定頁(yè)面的布局結(jié)構(gòu)。
- 分析頁(yè)面中的元素構(gòu)成。
- 選用適合的布局容器組件或?qū)傩钥刂祈?yè)面中各個(gè)元素的位置和大小約束。
二、布局結(jié)構(gòu)
布局元素的組成文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-790515.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790515.html
- 組件區(qū)域（藍(lán)區(qū)方塊）：組件區(qū)域表明組件的大小，width、height屬性設(shè)置該區(qū)域的大小。
- 組件內(nèi)容區(qū)（黃色方塊）：組件區(qū)域大小減去組件的padding值，組件內(nèi)容區(qū)大小會(huì)作為組件內(nèi)容（或者子組件）進(jìn)行大小測(cè)算時(shí)的布局測(cè)算限制。
- 組件內(nèi)容（綠色方塊）：組件內(nèi)容本身占用的大小，比如文本內(nèi)容占用的大小。組件內(nèi)容和組件內(nèi)容區(qū)不一定匹配，比如設(shè)置了固定的width和height，此時(shí)組件內(nèi)容區(qū)大小就是設(shè)置的width和height減去padding值，但文本內(nèi)容則是通過(guò)文本布局引擎測(cè)算后得到的大小，可能出現(xiàn)文本真實(shí)大小小于設(shè)置的組件內(nèi)容區(qū)大小。當(dāng)組件內(nèi)容和組件內(nèi)容區(qū)大小不一致時(shí)，align屬性生效，定義組件內(nèi)容在組件內(nèi)容區(qū)的對(duì)齊方式，如居中對(duì)齊。
- 組件布局邊界（虛線部分）：組件通過(guò)margin屬性設(shè)置外邊距時(shí)，組件布局邊界就是組件區(qū)域加上margin的大小。
三、聲明式UI提供了以下8種常見(jiàn)布局
| 關(guān)鍵字 | 描述 |
|---|---|
| Row、Column | 線性布局 |
| Stack | 層疊布局 |
| Flex | 彈性布局 |
| RelativeContainer | 相對(duì)布局 |
| GridRow、GridCol | 柵格布局 |
| List | 列表 |
| Grid | 網(wǎng)格 |
| Swiper | 輪播 |
| 布局 | 應(yīng)用場(chǎng)景 |
|---|---|
| 線性布局（Row、Column） | 如果布局內(nèi)子元素超過(guò)1個(gè)，且能夠以某種方式線性排列時(shí)優(yōu)先考慮此布局。 |
| 層疊布局（Stack） | 組件需要有堆疊效果時(shí)優(yōu)先考慮此布局，層疊布局的堆疊效果不會(huì)占用或影響其他同容器內(nèi)子組件的布局空間。例如Panel作為子組件彈出時(shí)將其他組件覆蓋更為合理，則優(yōu)先考慮在外層使用堆疊布局。 |
| 彈性布局（Flex） | 彈性布局是與線性布局類似的布局方式。區(qū)別在于彈性布局默認(rèn)能夠使子組件壓縮或拉伸。在子組件需要計(jì)算拉伸或壓縮比例時(shí)優(yōu)先使用此布局，可使得多個(gè)容器內(nèi)子組件能有更好的視覺(jué)上的填充容器效果。 |
| 相對(duì)布局（RelativeContainer） | 相對(duì)布局是在二維空間中的布局方式，不需要遵循線性布局的規(guī)則，布局方式更為自由。通過(guò)在子組件上設(shè)置錨點(diǎn)規(guī)則（AlignRules）使子組件能夠?qū)⒆约涸跈M軸、縱軸中的位置與容器或容器內(nèi)其他子組件的位置對(duì)齊。設(shè)置的錨點(diǎn)規(guī)則可以天然支持子元素壓縮、拉伸，堆疊或形成多行效果。在頁(yè)面元素分布復(fù)雜或通過(guò)線性布局會(huì)使容器嵌套層數(shù)過(guò)深時(shí)推薦使用。 |
| 柵格布局（GridRow、GridCol） | 柵格是多設(shè)備場(chǎng)景下通用的輔助定位工具，通過(guò)將空間分割為有規(guī)律的柵格。柵格不同于網(wǎng)格布局固定的空間劃分，它可以實(shí)現(xiàn)不同設(shè)備下不同的布局，空間劃分更隨心所欲，從而顯著降低適配不同屏幕尺寸的設(shè)計(jì)及開(kāi)發(fā)成本，使得整體設(shè)計(jì)和開(kāi)發(fā)流程更有秩序和節(jié)奏感，同時(shí)也保證多設(shè)備上應(yīng)用顯示的協(xié)調(diào)性和一致性，提升用戶體驗(yàn)。推薦手機(jī)、大屏、平板等不同設(shè)備，內(nèi)容相同但布局不同時(shí)使用。 |
| 媒體查詢（@ohos.mediaquery） | 媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備不同狀態(tài)修改應(yīng)用的樣式。例如根據(jù)設(shè)備和應(yīng)用的不同屬性信息設(shè)計(jì)不同的布局，以及屏幕發(fā)生動(dòng)態(tài)改變時(shí)更新應(yīng)用的頁(yè)面布局。 |
| 列表（List） | 使用列表可以輕松高效地顯示結(jié)構(gòu)化、可滾動(dòng)的信息。在ArkUI中，列表具有垂直和水平布局能力和自適應(yīng)交叉軸方向上排列個(gè)數(shù)的布局能力，超出屏幕時(shí)可以滾動(dòng)。列表適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集，例如圖片和文本。 |
| 網(wǎng)格（Grid） | 網(wǎng)格布局具有較強(qiáng)的頁(yè)面均分能力，子組件占比控制能力，是一種重要自適應(yīng)布局。網(wǎng)格布局可以控制元素所占的網(wǎng)格數(shù)量、設(shè)置子組件橫跨幾行或者幾列，當(dāng)網(wǎng)格容器尺寸發(fā)生變化時(shí)，所有子組件以及間距等比例調(diào)整。推薦在需要按照固定比例或者均勻分配空間的布局場(chǎng)景下使用，例如計(jì)算器、相冊(cè)、日歷等。 |
| 輪播（Swiper） | 輪播組件通常用于實(shí)現(xiàn)廣告輪播、圖片預(yù)覽、可滾動(dòng)應(yīng)用等。 |
1、布局位置
| 方式 | 關(guān)鍵代碼 | 描述 |
|---|---|---|
| 絕對(duì)定位 | position | 使用position實(shí)現(xiàn)絕對(duì)定位，設(shè)置元素左上角相對(duì)于父容器左上角偏移位置。在布局容器中，設(shè)置該屬性不影響父容器布局，僅在繪制時(shí)進(jìn)行位置調(diào)整。 |
| 相對(duì)定位 | offset | 使用offset可以實(shí)現(xiàn)相對(duì)定位，設(shè)置元素相對(duì)于自身的偏移量。設(shè)置該屬性，不影響父容器布局，僅在繪制時(shí)進(jìn)行位置調(diào)整。 |
2、對(duì)子元素的約束
| 方式 | 關(guān)鍵代碼 | 描述 |
|---|---|---|
| 拉伸 | flexGrow和flexShrink屬性 | 1、flexGrow基于父容器的剩余空間分配來(lái)控制組件拉伸。2、flexShrink設(shè)置父容器的壓縮尺寸來(lái)控制組件拉伸。 |
| 縮放 | aspectRatio | aspectRatio屬性指定當(dāng)前組件的寬高比來(lái)控制縮放，公式為：aspectRatio=width/height。 |
| 占比 | layoutWeight | 1. 將子組件的寬高設(shè)置為父組件寬高的百分比。2. layoutWeight屬性，使得子元素自適應(yīng)占滿剩余空間。 |
| 隱藏 | displayPriority | 通過(guò)displayPriority屬性來(lái)控制頁(yè)面的顯示和隱藏。 |
到了這里，關(guān)于HarmonyOS應(yīng)用開(kāi)發(fā)學(xué)習(xí)筆記 ArkTS 布局概述的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
