鴻蒙OS開發(fā)：【一次開發(fā)，多端部署】（導(dǎo)航欄） 導(dǎo)航欄

一多導(dǎo)航欄

介紹

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

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

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

預(yù)覽效果

本示例在預(yù)覽器中的效果：

使用說明：

1. 打開首頁，在IDE編輯器中打開預(yù)覽器查看預(yù)覽效果。
2. 在預(yù)覽器中開啟窗口拖拽模式，拖動(dòng)窗口變化，可以查看組件的響應(yīng)式變化，如下圖所示：
3. 手動(dòng)自由拖拽窗口，將應(yīng)用窗口在sm/md/lg三種設(shè)備形態(tài)下進(jìn)行切換并查看預(yù)覽效果。
4. 在sm/lg窗口下，點(diǎn)擊左上角圖標(biāo)進(jìn)行側(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                 // 一級(jí)Tabs
|   |---CommonSubTabs.ets                  // 二級(jí)Tabs
|   |---Configuration.ets                  // 樣式配置
|   |---RecommendationList.ets             // 推薦頁面
|   |---SideBarController.ets              // 側(cè)邊欄控制器  

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

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

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

整體布局

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

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

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

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

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

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

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

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

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

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

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

審核編輯 黃宇