鴻蒙ArkUI之【如何選擇布局？】
如何選擇布局
聲明式UI提供了以下9種常見布局，開發(fā)者可根據(jù)實際應(yīng)用場景選擇合適的布局進(jìn)行頁面開發(fā)。
請熟悉鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md](。
| 布局 | 應(yīng)用場景 |
|---|---|
| [線性布局]（Row、Column） | 如果布局內(nèi)子元素超過1個，且能夠以某種方式線性排列時優(yōu)先考慮此布局。 |
| [層疊布局]（Stack） | 組件需要有堆疊效果時優(yōu)先考慮此布局，層疊布局的堆疊效果不會占用或影響其他同容器內(nèi)子組件的布局空間。例如[Panel]作為子組件彈出時將其他組件覆蓋更為合理，則優(yōu)先考慮在外層使用堆疊布局。 |
| [彈性布局]（Flex） | 彈性布局是與線性布局類似的布局方式。區(qū)別在于彈性布局默認(rèn)能夠使子組件壓縮或拉伸。在子組件需要計算拉伸或壓縮比例時優(yōu)先使用此布局，可使得多個容器內(nèi)子組件能有更好的視覺上的填充容器效果。 |
| [相對布局]（RelativeContainer） | 相對布局是在二維空間中的布局方式，不需要遵循線性布局的規(guī)則，布局方式更為自由。通過在子組件上設(shè)置錨點規(guī)則（AlignRules）使子組件能夠?qū)⒆约涸跈M軸、縱軸中的位置與容器或容器內(nèi)其他子組件的位置對齊。設(shè)置的錨點規(guī)則可以天然支持子元素壓縮、拉伸，堆疊或形成多行效果。在頁面元素分布復(fù)雜或通過線性布局會使容器嵌套層數(shù)過深時推薦使用。 |
| [柵格布局]（GridRow、GridCol） | 柵格是多設(shè)備場景下通用的輔助定位工具，通過將空間分割為有規(guī)律的柵格。柵格不同于網(wǎng)格布局固定的空間劃分，它可以實現(xiàn)不同設(shè)備下不同的布局，空間劃分更隨心所欲，從而顯著降低適配不同屏幕尺寸的設(shè)計及開發(fā)成本，使得整體設(shè)計和開發(fā)流程更有秩序和節(jié)奏感，同時也保證多設(shè)備上應(yīng)用顯示的協(xié)調(diào)性和一致性，提升用戶體驗。推薦手機、大屏、平板等不同設(shè)備，內(nèi)容相同但布局不同時使用。 |
| [媒體查詢]（@ohos.mediaquery） | 媒體查詢可根據(jù)不同設(shè)備類型或同設(shè)備不同狀態(tài)修改應(yīng)用的樣式。例如根據(jù)設(shè)備和應(yīng)用的不同屬性信息設(shè)計不同的布局，以及屏幕發(fā)生動態(tài)改變時更新應(yīng)用的頁面布局。 |
| [列表]（List） | 使用列表可以輕松高效地顯示結(jié)構(gòu)化、可滾動的信息。在ArkUI中，列表具有垂直和水平布局能力和自適應(yīng)交叉軸方向上排列個數(shù)的布局能力，超出屏幕時可以滾動。列表適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集，例如圖片和文本。 |
| [網(wǎng)格]（Grid） | 網(wǎng)格布局具有較強的頁面均分能力，子組件占比控制能力，是一種重要自適應(yīng)布局。網(wǎng)格布局可以控制元素所占的網(wǎng)格數(shù)量、設(shè)置子組件橫跨幾行或者幾列，當(dāng)網(wǎng)格容器尺寸發(fā)生變化時，所有子組件以及間距等比例調(diào)整。推薦在需要按照固定比例或者均勻分配空間的布局場景下使用，例如計算器、相冊、日歷等。 |
| [輪播]（Swiper） | 輪播組件通常用于實現(xiàn)廣告輪播、圖片預(yù)覽、可滾動應(yīng)用等。 |
布局位置
position、offset等屬性影響了布局容器相對于自身或其他組件的位置。
| 定位能力 | 使用場景 | 實現(xiàn)方式 |
|---|---|---|
| 絕對定位 | 對于不同尺寸的設(shè)備，使用絕對定位的適應(yīng)性會比較差，在屏幕的適配上有缺陷。 | 使用[position]實現(xiàn)絕對定位，設(shè)置元素左上角相對于父容器左上角偏移位置。在布局容器中，設(shè)置該屬性不影響父容器布局，僅在繪制時進(jìn)行位置調(diào)整。 |
| 相對定位 | 相對定位不脫離文檔流，即原位置依然保留，不影響元素本身的特性，僅相對于原位置進(jìn)行偏移。 | 使用[offset]可以實現(xiàn)相對定位，設(shè)置元素相對于自身的偏移量。設(shè)置該屬性，不影響父容器布局，僅在繪制時進(jìn)行位置調(diào)整。 |
對子元素的約束
審核編輯 黃宇
聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請聯(lián)系本站處理。
舉報投訴
-
組件
+關(guān)注
關(guān)注
1文章
532瀏覽量
18424 -
鴻蒙
+關(guān)注
關(guān)注
60文章
2620瀏覽量
44063
發(fā)布評論請先 登錄
相關(guān)推薦
熱點推薦
鴻蒙開發(fā)學(xué)習(xí)：初探【ArkUI-X】
**簡單來說，ArkTS + ArkUI-X 對標(biāo)的框架為 flutter，一次代碼，編譯為 native 全平臺運行**
鴻蒙ArkUI-X跨語言調(diào)用說明：【平臺橋接開發(fā)指南（Android）】
平臺橋接用于客戶端（ArkUI）和平臺（Android或iOS）之間傳遞消息，即用于ArkUI與平臺雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺的方法、平臺調(diào)用ArkUI側(cè)的方法。本文主要介紹A
鴻蒙Next實現(xiàn)瀑布流布局
好鴻蒙開發(fā)環(huán)境。打開 DevEco Studio，新建一個鴻蒙應(yīng)用項目，選擇合適的模板（如 Empty Feature Ability），設(shè)置項目名稱、包名等信息，完成項目創(chuàng)建。
## 二、
發(fā)表于 06-10 14:17
4天帶你上手HarmonyOS ArkUI開發(fā)——《HarmonyOS ArkUI入門訓(xùn)練營之健康生活實戰(zhàn)》
《HarmonyOS ArkUI入門訓(xùn)練營之健康飲食應(yīng)用》是面向入門開發(fā)者打造的實戰(zhàn)課程系列。特邀華為終端BG高級開發(fā)工程師作為本次訓(xùn)練營講師，以健康飲食為例，開展技術(shù)教學(xué)及實戰(zhàn)案例分享，助力入門
發(fā)表于 01-05 11:49
OpenHarmony使用ArkUI Inspector分析布局
多余的嵌套層次，縮短組件刷新耗時。本文會介紹如何使用ArkUI Inspector工具分析布局，提示應(yīng)用響應(yīng)性能。
● 關(guān)鍵字：列舉本文相關(guān)的關(guān)鍵字：OpenHarmony HarmonyOS 鴻蒙
發(fā)表于 09-04 15:27
鴻蒙ArkUI開發(fā)-應(yīng)用添加彈窗
彈窗是一種模態(tài)窗口，通常用來展示用戶當(dāng)前需要的或用戶必須關(guān)注的信息或操作。在彈出框消失之前，用戶無法操作其他界面內(nèi)容。ArkUI為我們提供了豐富的彈窗功能
鴻蒙ArkUI：【從代碼到UI顯示的整體渲染流程】
方舟開發(fā)框架（簡稱ArkUI）是鴻蒙開發(fā)的UI框架，提供如下兩種開發(fā)范式，我們 **只學(xué)聲明式開發(fā)范式**
鴻蒙ArkUI-X跨平臺開發(fā)：【 編寫第一個ArkUI-X應(yīng)用】
通過構(gòu)建一個簡單的ArkUI頁面跳轉(zhuǎn)示例，快速了解資源創(chuàng)建引用，路由代碼編寫和UI布局編寫等應(yīng)用開發(fā)流程。
鴻蒙ArkUI-X跨語言調(diào)用說明：【平臺橋接(@arkui-x.bridge)】
平臺橋接用于客戶端（ArkUI）和平臺（Android或iOS）之間傳遞消息，即用于ArkUI與平臺雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺的方法、平臺調(diào)用ArkUI側(cè)的方法。
工商網(wǎng)監(jiān)
評論