多設(shè)備自適應(yīng)能力

介紹

本示例是《一次開(kāi)發(fā)，多端部署》的配套示例代碼，展示了[頁(yè)面開(kāi)發(fā)的一多能力]，包括自適應(yīng)布局、響應(yīng)式布局、典型布局場(chǎng)景以及資源文件使用。

說(shuō)明：

• 自適應(yīng)布局能力僅可以保證在外部容器大小在一定范圍內(nèi)變化時(shí)，容器內(nèi)的元素布局合理。如果外部尺寸發(fā)生較大變化，需要借助響應(yīng)式布局能力進(jìn)一步適配（詳見(jiàn)《一次開(kāi)發(fā)，多端部署》中關(guān)于斷點(diǎn)的介紹）。
• 為簡(jiǎn)化代碼、突出重點(diǎn)及方便讀者理解，本示例中的自適應(yīng)布局部分未做多設(shè)備適配。此部分建議在DevEco自帶的MatePadPro預(yù)覽器中運(yùn)行及查看效果，以獲得最佳的體驗(yàn)。
• 響應(yīng)式布局、典型布局場(chǎng)景、資源文件使用均做了多設(shè)備適配，推薦參考如下方式查看代碼的運(yùn)行效果：
  • 將應(yīng)用安裝到不同類型的設(shè)備，查看運(yùn)行效果。
  • 將應(yīng)用安裝到開(kāi)發(fā)板等設(shè)備中，開(kāi)啟設(shè)備的自由窗口能力，查看不同窗口尺寸下的運(yùn)行效果。
  • 通過(guò)創(chuàng)建不同屏幕尺寸多個(gè)預(yù)覽器，或者通過(guò)拖拽的方式改變預(yù)覽器的屏幕尺寸，查看不同情況下的運(yùn)行效果。

效果預(yù)覽：

使用說(shuō)明

1. 啟動(dòng)應(yīng)用，首頁(yè)展示了自適應(yīng)布局、響應(yīng)式布局、典型布局場(chǎng)景和資源文件使用四個(gè)按鈕。
2. 點(diǎn)擊"自適應(yīng)布局"進(jìn)入新頁(yè)面，分別展示拉伸能力、縮放能力、隱藏能力、折行能力、均分能力、占比能力和延伸能力共7種自適應(yīng)布局能力。
3. 點(diǎn)擊"響應(yīng)式布局"進(jìn)入新頁(yè)面，分別展示斷點(diǎn)、媒體查詢和柵格布局3種響應(yīng)式布局能力。
4. 點(diǎn)擊"典型布局場(chǎng)景"進(jìn)入新頁(yè)面，展示了如何通過(guò)自適應(yīng)布局能力和響應(yīng)式布局能力，實(shí)現(xiàn)應(yīng)用開(kāi)發(fā)中的典型場(chǎng)景。
5. 點(diǎn)擊"資源文件使用"進(jìn)入新頁(yè)面，展示字符串和圖片資源的使用。

工程目錄

entry/src/main/ets/
|---Application
|   |---AbilityStage.ts
|---common
|   |---BreakpointSystem.ets                    
|   |---DirectoryList.ets
|   |---GetValueOnBreakpoint.ets
|---MainAbility
|   |---MainAbility.ts
|---model
|   |---Logger.ts                                       // 日志工具
|---pages
|   |---Index.ets                                       // 首頁(yè)
|   |---atomicLayoutCapability                          
|   |   |---equipartitionCapability
|   |   |   |---EquipartitionCapability.ets             // 均分能力
|   |   |---extensionCapability
|   |   |   |---ExtensionCapability1.ets                // 延伸能力1
|   |   |   |---ExtensionCapability2.ets                // 延伸能力2
|   |   |---flexibleCapability
|   |   |   |---FlexibleCapability1.ets                 // 拉伸能力2
|   |   |   |---FlexibleCapability2.ets                 // 拉伸能力2
|   |   |---hiddenCapability
|   |   |   |---HiddenCapability.ets                    // 隱藏能力
|   |   |---proportionCapability
|   |   |   |---ProportionCapability.ets                // 占比能力
|   |   |---scaleCapability
|   |   |   |---ScaleCapability.ets                     // 縮放能力
|   |   |---wrapCapability
|   |   |   |---WrapCapability.ets                      // 拆行能力
|   |   |---AtomicLayoutCapabilityIndex.ets             // 自適應(yīng)布局
|   |---gridRow                       
|   |   |---gridRow
|   |   |   |---GridRowSample1.ets                      // 柵格斷點(diǎn)1
|   |   |   |---GridRowSample2.ets                      // 柵格斷點(diǎn)2
|   |   |   |---GridRowSample3.ets                      // 柵格columns和gutter
|   |   |   |---GridRowSample4.ets                      // 柵格margin
|   |   |   |---GridRowSample5.ets                      // 柵格span
|   |   |   |---GridRowSample6.ets                      // 柵格offset
|   |   |   |---GridRowSample7.ets                      // 柵格order
|   |   |   |---GridRowSample8.ets                      // 柵格span/offset/order繼承性
|   |   |   |---GridRowSample9.ets                      // 柵格嵌套
|   |   |   |---GridRowSample10.ets                     // 柵格對(duì)齊
|   |   |---GridRowLayoutIndex.ets                      // 柵格布局
|   |---interactionNormCapability
|   |   |---InteractionNormCapability.ets                // 交互歸一能力
|   |---resourceQualifier
|   |   |---ResourceQualifier.ets                        // 資源文件使用
|   |---responsiveLayout
|   |   |---ResponsiveLayoutIndex.ets                    
|   |   |---breakpoint
|   |   |   |---BreakpointSample.ets                     // 斷點(diǎn)
|   |   |---mediaQuery
|   |   |   |---MediaQuerySample.ets                     // 媒體查詢
|   |---typicalScene
|   |   |---banner
|   |   |   |---BannerSample.ets                         // 廣告欄
|   |   |---bigImage
|   |   |   |---BigImageSample.ets                       // 大圖瀏覽
|   |   |---diversion
|   |   |   |---DiversionSample.ets                      // 挪移布局
|   |   |---header
|   |   |   |---HeaderSample.ets                         // 頂部布局
|   |   |---indentation
|   |   |   |---IndentationSample.ets                    // 縮進(jìn)布局
|   |   |---multiLaneList
|   |   |   |---MultiLaneListSample.ets                  // 多列列表
|   |   |---multiScene                               
|   |   |   |---data	
|   |   |   |   |---apliications	
|   |   |   |   |   |---Apliications.ets		
|   |   |   |   |---home
|   |   |   |   |   |---Home.ets					
|   |   |   |---pages    
|   |   |   |   |---apliications
|   |   |   |   |   |---Apliications.ets	
|   |   |   |   |---home	
|   |   |   |   |   |---Home.ets
|   |   |   |   |---player	
|   |   |   |   |   |---Player.ets
|   |   |   |   |---MultiScene.ets	                     // 一多典型場(chǎng)景
|   |   |---operationEntries
|   |   |   |---OperationEntriesSample.ets               // 操作入口
|   |   |---repeat
|   |   |   |---RepeatSample.ets                         // 重復(fù)布局
|   |   |---responsiveGrid
|   |   |   |---ResponsiveGridSample.ets                 // 網(wǎng)格視圖
|   |   |---sidebar
|   |   |   |---SidebarSample.ets                        // 側(cè)邊欄
|   |   |---tabs
|   |   |   |---TabsSample.ets                           // 頁(yè)簽布局
|   |   |---TypicalSceneIndex.ets                        // 典型布局場(chǎng)景

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

具體實(shí)現(xiàn)

• 該示例使用了路由跳轉(zhuǎn)接口，實(shí)現(xiàn)了各個(gè)不同布局之間的頁(yè)面跳轉(zhuǎn)，通過(guò)MediaQueryListener方法查詢媒體，matchMediaSync方法設(shè)置媒體查詢的查詢條件。
• 源碼：[BreakpointSystem.ets]，[DirectoryList.ets]
• 接口參考：[@ohos.router]，[@ohos.mediaquery]

審核編輯 黃宇