【最佳实践】一多开发实例（商务办公）

一多开发实例（商务办公）-一次开发，多端部署-HarmonyOS特征-最佳实践 - 华为HarmonyOS开发者 (huawei.com)

一多开发实例（商务办公）概述

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

• 核心功能：

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

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

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

• 关键场景：

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

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

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

下面的章节将分别从UX设计、架构设计、页面开发三个角度给出推荐的参考样例，介绍“一多”商务办公类应用在开发过程中的最佳实践。

说明

阅读本文前，读者需熟悉方舟开发框架（ArkUI框架）和页面开发的“一多”能力。下文将详细介绍它们在“一多”开发实践中如何使用。

UX设计

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

架构设计

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

页面开发

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

入口

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

  示意图	sm	md	lg	2in1
  效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

  区域编号	简介	实现方案
  1	标题	Text组件实现。
  2	多实例入口	设置List组件的listDirection属性在断点为sm时为Vertical纵向展示，其余断点为Horizontal横向展示，同时点击子组件使用startAbility拉起新实例。

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

备忘录

• 将备忘录页划分为6个部分，效果图如下：

  示意图	sm	md	lg	2in1
  效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

  区域编号	简介	实现方案
  1	侧边栏	监听断点变化，设置SideBarContainer组件的SideBarContainerType属性在断点为lg时为Embed，其余断点为Overlay，实现侧边栏根据不同断点显示类型变化的效果，代码可参考侧边栏显示类型变化。
  2	侧边栏显隐控件	监听断点变化，设置SideBarContainer组件的showSideBar属性，实现侧边栏根据不同断点显示隐藏的效果，代码可参考侧边栏显隐变化。
  3	navigation导航页	通过Navigation路由栈NavPathStack，将NavDestination页面信息入栈，实现NavDestination页面的展示。
  4	navigation内容页	NavDestination页面信息。
  5	navigation内容页-控制按钮	给控制按钮添加onClick事件，通过自定义变量notesNavMode改变Navigation中mode属性的值，控制单双栏的变化，并通过自定义变量sideBarStatus改变SideBarContainer组件中showSideBar属性的值，控制侧边栏的显隐，实现内容页全屏展示或退出全屏的效果，代码可参考navigation内容页-控制按钮。
  6	按钮组件	监听断点变化，不同断点展示的位置不同。

• 侧边栏显示类型变化

  监听断点变化，同时设置SideBarContainer组件的SideBarContainerType属性在断点为lg时为Embed，其余断点为Overlay，实现侧边栏根据不同断点显示类型变化的效果。

• 侧边栏显隐变化

  监听断点变化，同时设置SideBarContainer组件的showSideBar属性，实现侧边栏根据不同断点显示隐藏的效果。

• navigation内容页-控制按钮给控制按钮添加onClick事件，通过自定义变量notesNavMode改变Navigation中mode属性的值，控制单双栏的变化，并通过自定义变量sideBarStatus改变SideBarContainer组件中showSideBar属性的值，控制侧边栏的显隐，实现内容页全屏展示或退出全屏的效果。

• 整个页面使用的是分栏布局，点击navigation导航页的某一备忘清单时，可分栏显示备忘内容，该功能在一多开发实例（银行理财）中有详细介绍。

笔记汇总

• 将笔记汇总页划分为4个部分，效果图如下：

  示意图	sm	md	lg	2in1
  效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

  区域编号	简介	实现方案
  1	侧边栏	监听断点变化，设置SideBarContainer组件的SideBarContainerType属性在断点为lg时为Embed，其余断点为Overlay，实现侧边栏根据不同断点显示类型变化的效果。
  2	侧边栏显隐控件	监听断点变化，设置SideBarContainer组件的showSideBar属性，实现侧边栏根据不同断点显示隐藏的效果。
  3	标题栏	空白部分使用Blank组件填充，实现拉伸能力。2in1设备需设置setWindowDecorVisible接口，隐藏标题栏后避让系统绘制的右上角三键区域。
  4	笔记汇总	使用网格布局Grid组件，在不同断点下将父组件分为不同列数，来实现自适应布局的占比能力，可参考一多开发实例（长视频）

• 整个页面使用的是宫格卡片，点击某一个笔记时，可打开笔记实例。

笔记

• 将笔记页划分为3个部分，效果图如下：

  示意图	sm	md	lg	2in1
  效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

  区域编号	简介	实现方案
  1	标题栏	点击加号，增加Tabs标签及TabContent，实现多实例的效果，空白部分使用Blank组件填充，实现拉伸能力。
  2	编辑按钮	监听断点变化，改变List组件下子组件的间隔宽度，同时设置固定宽度，当List组件下的Tabs内容超过设定宽度时隐藏部分Tabs，延伸显示更多。
  3	笔记内容	Tabs标签下的TabContent。

日历

• 将日历页划分为6个部分，效果图如下：

  示意图	sm	md	lg	2in1
  效果图

• 对其中的各个区域分析使用的一多能力，实现方案如下表：

  区域编号	简介	实现方案
  1	侧边栏	设置SideBarContainer组件的SideBarContainerType属性在断点为lg时为Embed，其余断点为Overlay，实现侧边栏根据不同断点显示类型变化的效果。
  2	侧边栏显隐控件	设置SideBarContainer组件的showSideBar属性，实现侧边栏根据不同断点显示隐藏的效果。
  3	标题栏	空白部分使用Blank组件填充，实现拉伸能力。2in1设备需设置setWindowDecorVisible接口，隐藏标题栏后避让系统绘制的右上角三键区域。
  4	navigation导航页	使用Grid组件设置columnsTemplate和rowsTemplate属性，实现五行七列的自适应布局。 通过Navigation路由栈NavPathStack，将NavDestination页面信息入栈，并监听断点变化，根据不同断点或状态改变Navigation的mode属性，实现单双栏切换及navigation内容页显隐的效果。
  5	navigation内容页	NavDestination页面信息。
  6	navigation控制按钮	给控制按钮添加onClick事件，用来改变Navigation的mode属性，实现单双栏切换及控制navigation内容页显隐的效果，代码可参考单双栏切换。

• 单双栏切换

  监听断点的变化，通过控制按钮的点击事件，用来改变Navigation的mode属性的变化，实现单双栏切换及navigation内容页显隐的效果，同时监听navigationMode的变化，来控制页面是否跳转。

• 整个页面使用的是分栏布局，点击navigation导航页的某一日期时，可分栏显示行程内容，该功能在一多开发实例（银行理财）中有详细介绍。

如果读者需要阅读完整代码，详情可参考一多商务办公。