鸿蒙OS开发:【一次开发,多端部署】(分栏控件)

一多分栏控件

介绍

本示例分别展示了多场景下,一多分栏控件的响应式变化效果。

本示例分别用到了[SideBarContainer]组件与[Navigation]组件,对应使用场景如下:

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

效果预览

本示例在预览器中的效果:

A+B+C:

A+C:

B+C:

使用说明:

1.在预览器中查看页面效果

2.在预览器中开启窗口拖拽模式,拖动窗口变化,可以查看组件的响应式变化,如下图所示:

工程目录

复制代码
`HarmonyOS与OpenHarmony鸿蒙文档籽料:mau123789是v直接拿`

MultiNavBar/entry/src/main/ets/
|---model
|   |---dataType.ets                       // 侧边栏菜单数据类型
|---Application                                  
|   |---MailBox.ets                        // 邮箱
|   |---PhotoAlbum.ets                     // 图库
|   |---Settings.ets                       // 设置
|---pages                                  
|   |---Index.ets                          // 首页
|---common                                    
|   |---BreakpointSystem.ets               // 媒体查询
|   |---MailContent.ets                    // 邮箱详情
|   |---MailNavigation.ets                 // 邮箱导航
|   |---MailSideBar.ets                    // 邮箱侧边栏
|   |---PhotoContent.ets            	   // 图库详情
|   |---PhotoSideBar.ets             	   // 图库侧边栏     
|   |---SettingItem.ets             	   // setting设置项  
|   |---WlanItem.ets             	       // Wlan详情页

具体实现

  • SideBarContainer\]组件,自动隐藏侧边栏的功能是由minContentWidth与minSideBarWidth属性实现的。当设置\[SideBarContainer\]组件组件的显示类型为SideBarContainerType.Embed,并且窗口宽度达到minContentWidth + minSideBarWidth的边界值时,侧边栏自动隐藏。

  • 开发前请熟悉鸿蒙开发指导文档gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

响应式规则

场景一:A+B+C

  1. 预览器窗口宽度>840vp时,显示A、B、C三列,放大缩小时,优先变化C列
  2. 预览器窗口宽度<=840vp并且>600vp时,显示B、C两列,放大缩小时,优先变化C列
  3. 预览器窗口宽度<=600vp并且>360vp时,仅显示C列

场景二:A+C

  1. 预览器窗口宽度>600vp时,显示A、C三列,放大缩小时,优先变化C列
  2. 预览器窗口宽度<=600vp并且>360vp时,仅显示C三列

场景三:B+C

  1. 预览器窗口宽度>600vp时,显示B、C三列,放大缩小时,优先变化C列
  2. 预览器窗口宽度<=600并且>360vp时,仅显示C三列
相关推荐
缘澄几秒前
ArkUI基础篇-组件事件
harmonyos·arkui
鸿蒙先行者3 分钟前
HarmonyOS与OpenHarmony区别分析
harmonyos
li理17 分钟前
鸿蒙NEXT渲染控制全面解析:从条件渲染到混合开发
harmonyos
li理1 小时前
鸿蒙Next组件扩展全面解析:从构建函数到样式复用的完整指南
前端·harmonyos
博客园团队1 小时前
2025 HarmonyOS 创新赛正式启动,百万大奖等你挑战!
harmonyos
秋难降2 小时前
聊聊 “摸鱼式” 遍历 —— 受控遍历的小心机
数据结构·算法·程序员
黑土豆2 小时前
那些藏在云边小卖部里的温暖与遗憾
程序员
Java中文社群2 小时前
超简单!手把手教你玩转ClaudeCode,无魔法不会员!
人工智能·程序员
AlbertZein3 小时前
HarmonyOS5 一顿饭时间 —— LRU、磁盘缓存与内存优化的结合
架构·harmonyos
AI大模型3 小时前
如何成为一名成功的AI产品经理:从传统产品到AI产品的转型之路
程序员·llm·agent