一多導航欄

介紹

本示例展示了導航組件在不同設(shè)備形態(tài)下的樣式。

• 在sm設(shè)備上，以tabs形式展示，內(nèi)容、導航為上下樣式布局，通過點擊底部tabs切換內(nèi)容；
• 在md/lg設(shè)備上，以[SideBarContainer]形式展示，內(nèi)容、導航為左右布局，通過點擊側(cè)邊一二級菜單進行內(nèi)容切換。
• 開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 ：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點擊或者復制轉(zhuǎn)到。

本示例使用[一次開發(fā)多端部署]中介紹的自適應布局能力和響應式布局能力進行多設(shè)備（或多窗口尺寸）適配，主要通過組件提供窗口斷點事件，保證應用在不同設(shè)備或不同窗口尺寸下可以正常顯示。

預覽效果

本示例在預覽器中的效果：

使用說明：

1. 打開首頁，在IDE編輯器中打開預覽器查看預覽效果。
2. 在預覽器中開啟窗口拖拽模式，拖動窗口變化，可以查看組件的響應式變化，如下圖所示：
3. 手動自由拖拽窗口，將應用窗口在sm/md/lg三種設(shè)備形態(tài)下進行切換并查看預覽效果。
4. 在sm/lg窗口下，點擊左上角圖標進行側(cè)邊欄樣式切換

工程目錄

MultiNavBar/entry/src/main/ets/
|---model
|   |---MenuType.ets                       // 側(cè)邊欄菜單數(shù)據(jù)類型
|   |---SideListData.ets                   // 側(cè)邊欄數(shù)據(jù)
|---pages                                  
|   |---AppStore.ets                       // 首頁
|---common                                    
|   |---BreakpointSystem.ets               // 媒體查詢
|   |---CommonMainTabs.ets                 // 一級Tabs
|   |---CommonSubTabs.ets                  // 二級Tabs
|   |---Configuration.ets                  // 樣式配置
|   |---RecommendationList.ets             // 推薦頁面
|   |---SideBarController.ets              // 側(cè)邊欄控制器  

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

具體實現(xiàn)

本示例介紹如何使用自適應布局能力和響應式布局能力適配不同尺寸窗口,將頁面分拆為2部分。

整體布局

1.通過GridRow組件提供的斷點事件，獲取到當前窗口的斷點，通過visibility屬性將[Tabs]組件與[SideBarContainer]組件分別在sm/(md、lg) 形態(tài)下展示/隱藏。

2.同時通過斷點，對組件設(shè)置不同的樣式屬性，以最優(yōu)的效果展示。

側(cè)邊欄SideBar/底部TabsController

1.側(cè)邊欄內(nèi)容布局通過Flex容器分別在sm/(md、lg)形態(tài)下進行橫豎展示。

2.內(nèi)容區(qū)域通過不同的窗口斷點進行選擇顯隱。

3.md、lg形態(tài)側(cè)邊欄一級菜單對應sm形態(tài)最外層的TabsController組件、二級菜單對應里層的TabsController組件。

4.側(cè)邊欄同時存在兩種形態(tài)list/tabs，通過側(cè)邊欄左上角圖標切換，list模式下內(nèi)容區(qū)域較小，根據(jù)窗口斷點只顯示圖標/圖標+文字，tabs模式下內(nèi)容區(qū)域較大，顯示圖標+文字。

內(nèi)容區(qū)域

1.Swiper組件通過獲取窗口斷點，設(shè)置displayCount屬性，在不同窗口下顯示不同數(shù)量的圖片。

2.Gird組件通過獲取窗口斷點，設(shè)置columnsTemplate與rowsTemplate屬性，在不同窗口下顯示不同數(shù)量的Item。

3.內(nèi)容瀏覽的連續(xù)性，進行窗口切換時，內(nèi)容區(qū)域的瀏覽進度可以保持，不會進行重新刷新。

審核編輯 黃宇