【鸿蒙实战开发】一多开发实例（商务办公）

往期推文全新看点

• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

概述

本文从目前流行的垂类市场中，选择商务办公类应用作为典型案例，详细介绍 “一多” 在实际开发中的应用。主要包含入口、备忘录、笔记汇总、笔记、日历等典型页面。

• 核心功能：

  侧边栏显隐 ：监听断点变化，设置 SideBarContainer组件 的SideBarContainerType属性或改变showSideBar属性参数，实现侧边栏根据不同断点显示隐藏及显示类型的变化。

  分栏布局 ：分栏布局通过 Navigation 实现，监听断点变化，根据不同断点或状态改变Navigation的mode属性，实现单双栏切换的效果。

  宫格卡片 ：用网格布局 Grid组件 ，在不同断点下将父组件分为不同列数，来实现自适应布局的占比能力。

• 关键场景：

  入口-多实例：监听断点变化，设置 List组件 的listDirection属性在断点为sm时为Vertical纵向展示，其余断点为Horizontal横向展示，实现入口组件根据不同断点横纵排列不同的效果。使用 startAbility 实现点击子组件时拉起新实例的效果。

  备忘录-侧边栏显隐：监听断点变化，设置 SideBarContainer组件 的SideBarContainerType属性或改变showSideBar属性参数，实现侧边栏根据不同断点显示隐藏及显示类型的变化。

  日历-navigation的单双栏变化：监听断点变化，根据不同断点或状态改变 Navigation 的mode属性，实现单双栏效果切换的效果。

UX设计

本示例中的商务办公应用包含入口、备忘录、笔记汇总、笔记、日历等页面。以平板端为例，应用的基本业务逻辑如下所示。

架构设计

HarmonyOS的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。

页面开发

本章介绍商务办公类应用中如何使用”一多”的布局能力，完成页面层级的一套页面、多端适配。下文将从不同页面展开，介绍每个页面区域使用到具体的布局能力，帮助开发者从零到一进行商务办公类应用的开发。

入口

• 将入口页划分为2个部分，效果图如下：

示意图	sm	md	lg	2in1
效果图