[HarmonyOS Next示例代码]一多商务办公类的关键场景实现

打印 上一主题 下一主题

主题 1018|帖子 1018|积分 3054

HarmonyOS next 示例代码全集
MultiBusinessOffice: 本示例重要使用断点监听和SidebarContainer组件、Navigation组件相结合的方式,实现了商务办公类差异化的多场景响应式变革效果。

一多商务办公类的关键场景实现

介绍

本示例重要使用断点监听和sidebarContainer组件、navigation组件相结合的方式,实现了商务办公类差异化的多场景响应式变革效果。
效果预览

本示例分为三个页面:
入口页:
手机折叠屏(展开态)平板2in1

  

  

  

  备忘录页:
手机折叠屏(展开态)平板2in1

  

  

  

  日历页:
手机折叠屏(展开态)平板2in1

  

  

  

  使用阐明:


  • 入口页

    • 点击备忘录或日历按钮,打开备忘录或日历实例页面;
    • 页面旋转跟随桌面旋转模式(及装备桌面可旋转,页面可旋转)。

  • 备忘录页

    • 点击左上角第一个按钮为sidebar控制按钮,可控制sidebar侧边栏显隐(sidebar在屏幕宽度小于lg时,默认隐蔽,且悬浮展示;大于等于lg时,默认展开,且嵌入到组件内部,与内容区并列展示);
    • 点击备忘内容列表,跳转对应详细内容(在屏幕宽度大于等于md时,显现为双栏,右栏展示详细内容页面);
    • 点击内容页面左上角按钮,可全屏展示内容页,再次点击可推出全屏;
    • 页面旋转跟随桌面旋转模式(及装备桌面可旋转,页面可旋转)。

  • 日历页

    • 点击左上角第一个按钮为sidebar控制按钮,可控制sidebar侧边栏显隐(sidebar在屏幕宽度小于lg时,默认隐蔽,且悬浮展示;大于等于lg时,默认展开,且嵌入到组件内部,与内容区并列展示);
    • 点击日历中的具体日期,可展示具体日程,点击无日程的日期不展示/收起具体日程页(屏幕宽度为sm时,上下显示,屏幕宽度大于等于md时,双栏显示。选中无日程的日期时,不停单栏显示);
    • 点击右侧三个按钮中的第一个,可以控制navigation单双栏变革,单栏状态下且选中无日程的日期时,点击按钮不会由单栏变双栏;
    • 页面旋转跟随桌面旋转模式(及装备桌面可旋转,页面可旋转)。

工程目次

  1. ├──entry/src/main/ets                              // 代码区
  2. │  ├──constants                                 
  3. │  │  ├──utils
  4. │  │  │  └──Logger.ets                             // 日志
  5. │  │  └──CommonConstants.ets                       // 常用常量
  6. │  ├──entryability  
  7. │  │  └──EntryAbility.ets
  8. │  ├──entrybackupability  
  9. │  │  └──EntryBackupAbility.ets
  10. │  ├──pages  
  11. │  │  ├──CalendarPage.ets                          // 日历页
  12. │  │  ├──Index.ets                                 // 入口页                                
  13. │  │  └──NotesPage.ets                             // 备忘录页
  14. │  ├──secondability  
  15. │  │  └──SecondAbility.ets
  16. │  ├──thirdability  
  17. │  │  └──ThirdAbility.ets
  18. │  ├──view
  19. │  │  ├──CalendarSideBarView.ets                   // 日历侧边栏
  20. │  │  ├──CalendarViewPage.ets                      // 日历内容页
  21. │  │  ├──NotesPageC.ets                            // 备忘录C栏页
  22. │  │  ├──sidebarContentView.ets                    // 备忘录侧边栏内容
  23. │  │  └──TripSchedule.ets                          // 日历日程页  
  24. │  └──viewmodel
  25. │     ├──CalendarItem.ets                          // 日历数据类型
  26. │     ├──NotesData.ets                             // 备忘录数据类型
  27. │     └──TripData.ets                              // 日程数据类型     
  28. └──entry/src/main/resources                        // 应用资源目录
复制代码
具体实现



  • 使用UIAbilityContext.startAbility()方法实现拉起新实例的功能。
  • 在不同断点下,sidebarContainer组件的断点类型sidebarContainerType属性或侧边栏显示隐蔽showSidebar属性不同,实现侧边栏根据不同断点显示隐蔽及显示类型的变革。
  • 根据不同断点或状态改变navigation的mode属性,实现单双栏的切换效果。
相关权限

不涉及。
依赖

不涉及。
约束与限制


  • 本示例仅支持标准体系上运行,支持装备:华为手机。
  • HarmonyOS体系:HarmonyOS NEXT Developer Beta3及以上。
  • DevEco Studio版本:DevEco Studio NEXT Developer Beta3及以上。
  • HarmonyOS SDK版本:HarmonyOS NEXT Developer Beta3 SDK及以上。

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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

尚未崩坏

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表