[HarmonyOS Next示例代码] 鸿蒙UI开辟 - 一多分栏控件

鸿蒙UI开辟 - 一多分栏控件 源码下载地点 
先容

本示例分别展示了多场景下，一多分栏控件的响应式变化效果。
本示例分别用到了SideBarContainer组件与Navigation组件，对应使用场景如下：

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

效果预览

本示例在预览器中的效果：
A+B+C:
360vp600vp840vp

  

  

  A+C:
360vp600vp

  

  B+C:
360vp600vp

  

  使用分析：
1.在预览器中查看页面效果
2.在预览器中开启窗口拖拽模式，拖动窗口变化，可以查看组件的响应式变化，如下图所示： 

工程目录

1. ├──entry/src/main/ets                         // 代码区
2. │  ├──application                                 
3. │  │  ├──MailBox.ets                          // 邮箱
4. │  │  ├──PhotoAlbum.ets                       // 图库
5. │  │  └──Settings.ets                         // 设置
6. │  ├──common  
7. │  │  ├──BreakpointSystem.ets                 // 媒体查询
8. │  │  ├──MailContent.ets                      // 邮箱详情
9. │  │  ├──MailNavigation.ets                   // 邮箱导航
10. │  │  ├──MailSideBar.ets                      // 邮箱侧边栏
11. │  │  ├──PhotoContent.ets                          // 图库详情
12. │  │  ├──PhotoSideBar.ets                           // 图库侧边栏     
13. │  │  ├──SettingItem.ets                           // setting设置项  
14. │  │  └──WlanItem.ets                         // Wlan详情页
15. │  ├──entryability  
16. │  │  └──EntryAbility.ets         
17. │  ├──model  
18. │  │  └──dataType.ets                         // 侧边栏菜单数据类型
19. │  └──pages                                    
20. │     └──Index.ets                            // 首页
21. └──entry/src/main/resources                   // 应用资源目录

复制代码

具体实现

• SideBarContainer组件，主动隐藏侧边栏的功能是由minContentWidth与minSideBarWidth属性实现的。当设置SideBarContainer组件组件的表现范例为SideBarContainerType.AUTO,而且窗口宽度达到minContentWidth + minSideBarWidth的界限值时，侧边栏主动隐藏。
  
• Navigation组件，主动隐藏侧边栏的功能是由minContentWidth属性实现的。当Navigation的内容地域达到minContentWidth设置的值时，navBar主动隐藏。
  

响应式规则
场景一：A+B+C

• 预览器窗口宽度>840vp时，表现A、B、C三列，放大缩小时，优先变化C列
  
• 预览器窗口宽度<=840vp而且>600vp时，表现B、C两列，放大缩小时，优先变化C列
  
• 预览器窗口宽度<=600vp而且>360vp时，仅表现C列
  

场景二：A+C

• 预览器窗口宽度>600vp时，表现A、C三列，放大缩小时，优先变化C列
  
• 预览器窗口宽度<=600vp而且>360vp时，仅表现C三列
  

场景三：B+C

• 预览器窗口宽度>600vp时，表现B、C三列，放大缩小时，优先变化C列
  
• 预览器窗口宽度<=600而且>360vp时，仅表现C三列
  

相关权限

不涉及。
依靠

不涉及

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。