殿上欢,小说网,择天记

如何選擇布局

聲明式UI提供了以下9種常見(jiàn)布局，開(kāi)發(fā)者可根據(jù)實(shí)際應(yīng)用場(chǎng)景選擇合適的布局進(jìn)行頁(yè)面開(kāi)發(fā)。

請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md](。

布局	應(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)用等。

布局位置

position、offset等屬性影響了布局容器相對(duì)于自身或其他組件的位置。

定位能力	使用場(chǎng)景	實(shí)現(xiàn)方式
絕對(duì)定位	對(duì)于不同尺寸的設(shè)備，使用絕對(duì)定位的適應(yīng)性會(huì)比較差，在屏幕的適配上有缺陷。	使用[position]實(shí)現(xiàn)絕對(duì)定位，設(shè)置元素左上角相對(duì)于父容器左上角偏移位置。在布局容器中，設(shè)置該屬性不影響父容器布局，僅在繪制時(shí)進(jìn)行位置調(diào)整。
相對(duì)定位	相對(duì)定位不脫離文檔流，即原位置依然保留，不影響元素本身的特性，僅相對(duì)于原位置進(jìn)行偏移。	使用[offset]可以實(shí)現(xiàn)相對(duì)定位，設(shè)置元素相對(duì)于自身的偏移量。設(shè)置該屬性，不影響父容器布局，僅在繪制時(shí)進(jìn)行位置調(diào)整。

搜狗高速瀏覽器截圖20240326151344.png

對(duì)子元素的約束

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴

組件

組件

+關(guān)注

關(guān)注
1

文章
515

瀏覽量
17881
鴻蒙

鴻蒙

+關(guān)注

關(guān)注
57

文章
2386

瀏覽量
42961

評(píng)論

相關(guān)推薦

鴻蒙開(kāi)發(fā)學(xué)習(xí)：初探【ArkUI-X】

**簡(jiǎn)單來(lái)說(shuō)，ArkTS + ArkUI-X 對(duì)標(biāo)的框架為 flutter，一次代碼，編譯為 native 全平臺(tái)運(yùn)行**

發(fā)表于 05-13 15:58 ?1096次閱讀

<b class='flag-5'>鴻蒙</b>開(kāi)發(fā)學(xué)習(xí)：初探【<b class='flag-5'>ArkUI</b>-X】

鴻蒙ArkUI開(kāi)發(fā)：常用布局【主軸】

線性布局的子元素在線性方向上（水平方向和垂直方向）依次排列

發(fā)表于 05-13 17:33 ?892次閱讀

<b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>開(kāi)發(fā)：常用<b class='flag-5'>布局</b>【主軸】

鴻蒙ArkUI-X跨語(yǔ)言調(diào)用說(shuō)明：【平臺(tái)橋接開(kāi)發(fā)指南（Android）】

平臺(tái)橋接用于客戶端（ArkUI）和平臺(tái)（Android或iOS）之間傳遞消息，即用于ArkUI與平臺(tái)雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺(tái)的方法、平臺(tái)調(diào)用ArkUI側(cè)的方法。本文主要介紹A

發(fā)表于 05-25 16:26 ?771次閱讀

<b class='flag-5'>鴻蒙</b><b class='flag-5'>ArkUI</b>-X跨語(yǔ)言調(diào)用說(shuō)明：【平臺(tái)橋接開(kāi)發(fā)指南（Android）】

4天帶你上手HarmonyOS ArkUI開(kāi)發(fā)——《HarmonyOS ArkUI入門(mén)訓(xùn)練營(yíng)之健康生活實(shí)戰(zhàn)》

《HarmonyOS ArkUI入門(mén)訓(xùn)練營(yíng)之健康飲食應(yīng)用》是面向入門(mén)開(kāi)發(fā)者打造的實(shí)戰(zhàn)課程系列。特邀華為終端BG高級(jí)開(kāi)發(fā)工程師作為本次訓(xùn)練營(yíng)講師，以健康飲食為例，開(kāi)展技術(shù)教學(xué)及實(shí)戰(zhàn)案例分享，助力入門(mén)

發(fā)表于 01-05 11:49