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