一多分欄控件

介紹

本示例分別展示了多場(chǎng)景下，一多分欄控件的響應(yīng)式變化效果。

本示例分別用到了[SideBarContainer]組件與[Navigation]組件，對(duì)應(yīng)使用場(chǎng)景如下：

• A+B+C：即SideBarContainer組件組合Navigation組件
• A+C：SideBarContainer組件
• B+C：Navigation組件

效果預(yù)覽

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

A+B+C :

A+C :

B+C :

使用說(shuō)明：

1.在預(yù)覽器中查看頁(yè)面效果

2.在預(yù)覽器中開(kāi)啟窗口拖拽模式，拖動(dòng)窗口變化，可以查看組件的響應(yīng)式變化，如下圖所示：

工程目錄

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

MultiNavBar/entry/src/main/ets/
|---model
|   |---dataType.ets                       // 側(cè)邊欄菜單數(shù)據(jù)類型
|---Application                                  
|   |---MailBox.ets                        // 郵箱
|   |---PhotoAlbum.ets                     // 圖庫(kù)
|   |---Settings.ets                       // 設(shè)置
|---pages                                  
|   |---Index.ets                          // 首頁(yè)
|---common                                    
|   |---BreakpointSystem.ets               // 媒體查詢
|   |---MailContent.ets                    // 郵箱詳情
|   |---MailNavigation.ets                 // 郵箱導(dǎo)航
|   |---MailSideBar.ets                    // 郵箱側(cè)邊欄
|   |---PhotoContent.ets            	   // 圖庫(kù)詳情
|   |---PhotoSideBar.ets             	   // 圖庫(kù)側(cè)邊欄     
|   |---SettingItem.ets             	   // setting設(shè)置項(xiàng)  
|   |---WlanItem.ets             	       // Wlan詳情頁(yè)

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

• [SideBarContainer]組件，自動(dòng)隱藏側(cè)邊欄的功能是由minContentWidth與minSideBarWidth屬性實(shí)現(xiàn)的。當(dāng)設(shè)置[SideBarContainer]組件組件的顯示類型為SideBarContainerType.Embed,并且窗口寬度達(dá)到minContentWidth + minSideBarWidth的邊界值時(shí)，側(cè)邊欄自動(dòng)隱藏。
• [Navigation]組件，自動(dòng)隱藏側(cè)邊欄的功能是由minContentWidth屬性實(shí)現(xiàn)的。當(dāng)[Navigation]的內(nèi)容區(qū)域達(dá)到minContentWidth設(shè)置的值時(shí)，navBar自動(dòng)隱藏。
• 開(kāi)發(fā)前請(qǐng)熟悉鴻蒙開(kāi)發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

響應(yīng)式規(guī)則

場(chǎng)景一：A+B+C

1. 預(yù)覽器窗口寬度>840vp時(shí)，顯示A、B、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=840vp并且>600vp時(shí)，顯示B、C兩列，放大縮小時(shí)，優(yōu)先變化C列
3. 預(yù)覽器窗口寬度<=600vp并且>360vp時(shí)，僅顯示C列

場(chǎng)景二：A+C

1. 預(yù)覽器窗口寬度>600vp時(shí)，顯示A、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=600vp并且>360vp時(shí)，僅顯示C三列

場(chǎng)景三：B+C

1. 預(yù)覽器窗口寬度>600vp時(shí)，顯示B、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=600并且>360vp時(shí)，僅顯示C三列

審核編輯 黃宇