如何選擇布局
聲明式UI提供了以下9種常見(jiàn)布局,開發(fā)者可根據(jù)實(shí)際應(yīng)用場(chǎng)景選擇合適的布局進(jìn)行頁(yè)面開發(fā)。
請(qǐng)熟悉鴻蒙開發(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ì)及開發(fā)成本,使得整體設(shè)計(jì)和開發(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)整。 |

對(duì)子元素的約束

審核編輯 黃宇
聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(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文章
574瀏覽量
19027 -
鴻蒙
+關(guān)注
關(guān)注
60文章
2963瀏覽量
45923
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
熱點(diǎn)推薦
鴻蒙開發(fā)學(xué)習(xí):初探【ArkUI-X】
**簡(jiǎn)單來(lái)說(shuō),ArkTS + ArkUI-X 對(duì)標(biāo)的框架為 flutter,一次代碼,編譯為 native 全平臺(tái)運(yùn)行**
鴻蒙ArkUI-X跨語(yǔ)言調(diào)用說(shuō)明:【平臺(tá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
鴻蒙Next實(shí)現(xiàn)瀑布流布局
好鴻蒙開發(fā)環(huán)境。打開 DevEco Studio,新建一個(gè)鴻蒙應(yīng)用項(xiàng)目,選擇合適的模板(如 Empty Feature Ability),設(shè)置項(xiàng)目名稱、包名等信息,完成項(xiàng)目創(chuàng)建。
## 二、
發(fā)表于 06-10 14:17
4天帶你上手HarmonyOS ArkUI開發(fā)——《HarmonyOS ArkUI入門訓(xùn)練營(yíng)之健康生活實(shí)戰(zhàn)》
《HarmonyOS ArkUI入門訓(xùn)練營(yíng)之健康飲食應(yīng)用》是面向入門開發(fā)者打造的實(shí)戰(zhàn)課程系列。特邀華為終端BG高級(jí)開發(fā)工程師作為本次訓(xùn)練營(yíng)講師,以健康飲食為例,開展技術(shù)教學(xué)及實(shí)戰(zhàn)案例分享,助力入門
發(fā)表于 01-05 11:49
OpenHarmony使用ArkUI Inspector分析布局
多余的嵌套層次,縮短組件刷新耗時(shí)。本文會(huì)介紹如何使用ArkUI Inspector工具分析布局,提示應(yīng)用響應(yīng)性能。
● 關(guān)鍵字:列舉本文相關(guān)的關(guān)鍵字:OpenHarmony HarmonyOS 鴻蒙
發(fā)表于 09-04 15:27
鴻蒙應(yīng)用ui布局
請(qǐng)問(wèn),在用java開發(fā)鴻蒙應(yīng)用布局UI時(shí),怎么才能全屏布局(不顯示labelb標(biāo)題)
發(fā)表于 09-20 22:09
鴻蒙ArkUI開發(fā)-應(yīng)用添加彈窗
彈窗是一種模態(tài)窗口,通常用來(lái)展示用戶當(dāng)前需要的或用戶必須關(guān)注的信息或操作。在彈出框消失之前,用戶無(wú)法操作其他界面內(nèi)容。ArkUI為我們提供了豐富的彈窗功能
鴻蒙ArkUI:【從代碼到UI顯示的整體渲染流程】
方舟開發(fā)框架(簡(jiǎn)稱ArkUI)是鴻蒙開發(fā)的UI框架,提供如下兩種開發(fā)范式,我們 **只學(xué)聲明式開發(fā)范式**
鴻蒙ArkUI-X跨平臺(tái)開發(fā):【 編寫第一個(gè)ArkUI-X應(yīng)用】
通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的ArkUI頁(yè)面跳轉(zhuǎn)示例,快速了解資源創(chuàng)建引用,路由代碼編寫和UI布局編寫等應(yīng)用開發(fā)流程。
鴻蒙ArkUI-X跨語(yǔ)言調(diào)用說(shuō)明:【平臺(tái)橋接(@arkui-x.bridge)】
平臺(tái)橋接用于客戶端(ArkUI)和平臺(tái)(Android或iOS)之間傳遞消息,即用于ArkUI與平臺(tái)雙向數(shù)據(jù)傳遞、ArkUI側(cè)調(diào)用平臺(tái)的方法、平臺(tái)調(diào)用ArkUI側(cè)的方法。
鴻蒙ArkUI之【如何選擇布局?】
評(píng)論