HarmonyOS 7 新特性实战（18）：EasyGo 导航模式接入与未分栏排查

先把目录与内容的路由关系接通阅读实验从目录选择旋龟进入详情再打开原典。目录、详情和原典各自是 Router 页面页面代码没有绘制左右两列。分栏交给 EasyGo 配置决定页面同时回读系统分栏状态方便区分“路由可用”和“系统兼容显示已经生效”。2026-09-19在 MatePad Pro 13 API 26 模拟器上两页同时显示且 isEasySplit 返回 true。进入详情再打开原典左侧目录始终保留2880 像素宽画面中左右页面分别占 960 与 1920 像素与预设 1:2 一致右栏内容起点另扣 1px 分割线。配置需要进入安装包在 entry 模块声明 easyGo引用 profile 资源中的配置。主页面使用 pages/Index和实际 Router 路径保持一致导航模式使用 mode1。本实验把宽窗口比例设为 1:2关闭分割线拖拽。拖拽与预设比例不是两项同时生效的设置开启拖拽后应另测默认比例及吸附行为。为了减少变量两个模式使用不同包名同一份页面源码不共用已有的能力实验应用配置。配置在应用级生效随意把它放进已有三维、音频和阅读混合工程可能改变其他页面的容器语义。这里选择独立工程便于把系统配置与普通路由分开核对。{common:{displayModeOptions:{wideWindowMode:routerSplit,squareWindowMode:routerSplit,routerSplitOptions:{homePage:pages/Index,mode:1,wideSplit:{ratio:1 | 2,isDraggable:false},squareSplit:{ratio:1 | 1},supportLandscapeFullscreen:false,enableReducedContainerSize:true}}}}在目录页面观察实际容器目录代码在区域变化时读取组件宽度和 isEasySplit也提供手动刷新按钮。测量值来自实际页面不根据配置文件生成“已分栏”提示。点击通过 pushUrl 传递稳定条目 ID失败时在当前页显示错误便于定位路由注册问题。EntryComponentstruct Index{Statesplit:booleanfalse;StatepageWidth:number0;Stateerror:string;build(){Column({space:16}){Text(山海阅读目录).fontSize(24).fontWeight(FontWeight.Bold)Text(08 / 09 · EasyGo 系统路由实验).fontSize(16)Text(系统分栏${this.split}· 容器${this.pageWidth}vp).id(splitState).fontSize(15)Button(刷新系统分栏状态).onClick((){this.splitthis.getUIContext().isEasySplit();})Button(阅读旋龟).id(openTurtle).width(90%).onClick((){this.open(xuangui);})Button(阅读鹿蜀).id(openDeer).width(90%).onClick((){this.open(lushu);})Text(选择条目后继续打开原典对照左侧保留哪一页。).fontSize(17)Text(this.error).fontSize(15)}.padding(20).width(100%).height(100%).backgroundColor(#F3F0E8).onAreaChange((_old:Area,area:Area){this.pageWidthMath.round(Number(area.width));this.splitthis.getUIContext().isEasySplit();})}privateopen(id:string):void{this.getUIContext().getRouter().pushUrl({url:pages/Detail,params:{id:id}}).catch((error:Error){this.errorerror.message;});}}横屏仅用来形成可重复的宽窗口条件。实验配置把 supportLandscapeFullscreen 设为 false避免应用主动横屏后退出分栏这项规则干扰观察这并不能保证任意直板设备一定进入平行视界。窗口尺寸、设备形态和系统支持仍需分别确认。详情页保存自己的业务目标详情在出现时校验参数只接受两条已知记录。打开原典时继续传递同一个 ID无效参数不启用原典按钮。这里的 ID 表示内容身份组件本身的 id 属性只用作控件定位两者不应使用同名状态字段否则会与 ArkUI 基类成员发生编译冲突。interfaceEntryParams{id?:string;}EntryComponentstruct Detail{StateentryId:string;Statetitle:string条目不存在;Statesplit:booleanfalse;Stateerror:string;aboutToAppear():void{constparamsthis.getUIContext().getRouter().getParams()asEntryParams|undefined;if(params?.idxuangui||params?.idlushu){this.entryIdparams.id;this.titlethis.entryIdxuangui?旋龟:鹿蜀;}}build(){Column({space:16}){Text(${this.title}· 详情).fontSize(26).fontWeight(FontWeight.Bold)Text(系统分栏${this.split}).fontSize(15)Text(此页保留条目 ID原典页使用同一 ID 查找内容。).fontSize(18)Button(打开对应原典).id(openSource).enabled(this.entryId.length0).onClick((){this.getUIContext().getRouter().pushUrl({url:pages/Source,params:{id:this.entryId}}).catch((error:Error){this.errorerror.message;});})Button(返回上一页).onClick((){this.getUIContext().getRouter().back();})Text(this.error).fontSize(15)}.padding(20).width(100%).height(100%).backgroundColor(#E9F3F1).onAreaChange((){this.splitthis.getUIContext().isEasySplit();})}}按证据区分接入与效果检查项本次观察可以得出的结论编译与打包两种模式都构建成功ArkTS 和资源格式通过本地构建安装包配置模块声明及配置资源实际存在排除未打包配置这一项条目到原典旋龟名称及正文一致路由参数与内容查找可运行isEasySplit可见页面均为 true此平板实例已进入系统分栏左右比例及页面移动左 960px、右 1920px目录保持预设 1:2 与导航固定左页生效此前直板手机实验中横屏目录宽 809vpisEasySplit 仍为 false该记录保留为历史条件下的结果。平板实验已经成功旧手机结果不能扩大为“API 26 模拟器全部不支持”平板结果也不能覆盖所有设备形态。检查范围当前状态后续边界平板分栏与预设比例已取得 true 探针及双页画面折叠屏、真机与拖拽未测第二页继续进入第三页已核对左侧页面身份更长路由链未测页面返回未复测导航模式返回系统全局返回仍需独立验证过渡页及全屏页未配置、未复测增加配置后逐项验收本实验未配置 relatedPage因为关联页不承接动态参数如果将依赖条目 ID 的详情直接当成启动关联页会让初始数据来源不清晰。也没有把 Router 与 Navigation 混在同一分栏配置中。后续引入分屏、过渡页或全屏页时应逐项增加并对比安装包中的最终配置避免同时改变多项后无法解释结果。配置依据为华为平行视界开发指南。API 26 新增的模式、比例等配置与更早版本的基础能力需分别标注。后续内容描述目录导航的扩展方案当前三页路由尚未实现这些状态管理。将目录导航扩展到更多内容状态读到一只神兽的介绍用户常常要返回列表再打开另一只对照。大屏上重复往返会浪费可用空间。导航模式可以把左侧作为稳定目录右侧承载详情与原典让选择与阅读同时保持可见。这种布局的难点在于导航语义右侧打开原典后按返回应回到当前神兽详情还是切换左侧目录如果只把原来的页面摆成两栏却不重新梳理路由屏幕变宽后反而会让返回路径变得更难预测。左侧选择与右侧历史是两类状态左侧保存当前目录分类和选中展品右侧保存该展品的阅读历史。切换左侧条目时是清空右侧历史还是为每个条目保留历史需要产品先作决定。第一版建议选中另一只神兽就打开其详情根页面同一神兽内部再保留“详情→原典→注释”的返回顺序。这样用户始终能从左侧看到当前阅读对象返回键也不会意外修改目录分类。interfaceReadingTarget{beastId:string;section:overview|source|annotation;sourceId:string;}interfaceCatalogueState{categoryId:string;selectedBeastId:string;}这是应用数据合同。EasyGo 的路由关系应按官方配置表达不能把这里的对象直接当作系统配置字段。一比二与二比一要服务阅读任务目录短、原典长时给右侧更多宽度更合适若左侧承载筛选、分类树和较长条目左侧需要更宽。比例应与实际阅读内容结合而不是把两种比例做成只改变截图外观的开关。测试时使用真实长标题和注释检查最窄栏宽下按钮是否仍可操作、正文行长是否合适。系统支持 1:2 或 2:1 启动能力不等于每个尺寸都适合强行双栏窄窗口仍需清晰的单栏路径。路由需要记录目的地避免重复打开右侧详情页的身份由条目 ID 决定不由标题字符串决定。再次点中同一条目时应复用或定位已有目标而不是不断向返回栈压入相同页面。恢复路由时还要确认该条目仍然存在。从通知或外部链接直达原典可先建立对应目录选择再打开右侧目标。不能只在右侧显示内容而让左侧仍选中另一只神兽否则用户会误解两栏关系。外部目标 → 校验条目 → 恢复分类与选择 → 建立详情根页面 → 打开原典位置复杂的全文滚动位置应由阅读页面保存目录只保存目标标识。减少跨栏共享的可变对象能避免一栏重建后把另一栏的阅读进度一起重置。系统分栏与页面内部自适应分别验收EasyGo 负责系统提供的页面关系与展示模式页面内部仍要处理字体、按钮、空状态和安全区域。写一个 Row 把两个组件并排放置可以验证局部布局但不能作为系统平行视界已经接入的证据。正式集成时记录使用的官方配置版本及对应路由。不要从旧配置里猜测新字段新增比例与模式规则以 API 26 配套指南为准。页面逻辑则尽量复用单栏组件避免维护两份详情业务。用返回序列检查设计是否自洽验收脚本应是一串具体动作左侧选 A右侧打开原典再打开注释连续返回两次然后选 B切换到窄窗口再返回大屏。每一步记录左侧选择、右侧内容和返回目标。还需要覆盖空目录、条目删除、超大字体和深链接直达。若窗口变化导致系统重新组织页面仍应保留选中条目与阅读位置不恢复已经结束的临时弹窗。对于图鉴应用导航模式最终应减少来回跳转同时保持原典阅读的连续性。评价可以用完成同一对照任务需要的操作次数和中断次数不必仅靠双栏截图判断体验是否更好。给返回键列出确定答案动作后的位置当前选中下一次返回A 的原典注释AA 的原典A 的原典AA 的详情根从左栏选 BB按根页面退出规则处理不回到 A 的注释每条目独立保存完整历史适合反复对照但会增加恢复和过期清理成本第一版选择切换条目回详情根只保留阅读进度。先在单栏确认路由表再接 EasyGo 配置最后验证比例切换。比例变化不应改变表里的逻辑目标。该表是本应用选择的导航合同不代表系统替应用决定所有返回行为。参考平行视界官方解读、API 26 版本概览。