ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

〖共创稿事节〗HarmonyOS 7 新特性实战(15):先用阅读任务检查空结果、长标题与字号变化

〖共创稿事节〗HarmonyOS 7 新特性实战(15):先用阅读任务检查空结果、长标题与字号变化 从同一条阅读任务建立基线多设备实验与第 15 篇复用阅读页面同一份搜索、详情和收藏逻辑用于检查不同内容状态避免另做一个没有真实操作的布局展示页。实测包括 API 26 手机模拟器与 HBN-AL80 真机多设备部分给出扩展矩阵平板和大窗口需要按各自尺寸执行相同任务。第一组状态是找不到内容。页面保留搜索输入显示数量 0 和修改关键词提示返回目录按钮仍可操作。它不会因为列表为空而让整页消失也没有通过自动替换关键词制造看似成功的结果。把长标题和字号变化分开观察实验数据中有专门标明的长标题教学条目它不是古籍记录。页面提供“放大正文字号”将列表标题和详情文字使用更大的字号。这个开关只是应用内字号测试不能代替系统字体缩放设置也不代表无障碍认证。StatelargeText:booleanfalse;// 控件显示直接依赖响应式字号状态。Button(this.largeText?恢复正文字号:放大正文字号).id(readingFont).onClick((){this.largeText!this.largeText;})列表承担条目滚动详情正文使用独立 Scroll 并分配剩余高度操作区保留在底部。检查时不仅看标题能否换行也要走进详情、滚动正文、返回列表确认操作入口没有被长内容推到不可到达的位置。用已执行范围约束结论在当前手机模拟器上长标题完整换行详情正文进入独立滚动区域收藏与返回入口仍可见。当前截图只证明这一状态下的布局连续滚动、系统字号缩放和其他窗口尺寸仍需单独验收。现有布局记录来自一个手机模拟器。大字号与长标题在该尺寸通过不覆盖平板、折叠屏、桌面键鼠或其他窗口宽度。UX 检测工具尚未生成正式报告UI 树截图只用于核对控件和布局不作为工具评分。手机端已走通的四个状态和它们不能覆盖的范围2026-09-15 的同一 API 26 手机模拟器运行记录保留了页面截图与布局快照。它们不是多设备检测报告但能够把“已在手机上做过什么”限定到具体任务状态页面可核对的结果证据空搜索显示“找到 0 条”和“没有匹配条目请修改关键词”输入与返回目录仍存在reading-empty.jpeg/json长标题列表过滤后为 1 条标题“长标题布局样本展厅关联阅读与状态恢复检查”完整显示reading-long-title.jpeg/json应用内大字号详情标题、教学正文、收藏入口与“返回搜索结果”同时可见正文由独立 Scroll 承载reading-large-detail.jpeg/json收藏后返回详情显示“已收藏”回到列表仍为 1 条并保留“收藏已保存到本机”的反馈reading-favorite.jpeg/json、reading-return.jpeg/json布局快照中的文字和可点击入口可复查截图只佐证该手机尺寸下的视觉结果没有覆盖系统字体缩放、多窗口、多设备或检测工具报告。扩展到多设备的测试设计手机上能点到的按钮到了平板分栏里可能被底部区域遮住桌面窗口缩窄后详情标题可能挤掉操作入口。多设备验收需要关注用户能否完成任务而不只是每种屏幕都有一张截图。固定任务为“搜索神兽、打开原典、收藏并返回”分别在手机、平板和可调整窗口上执行 UX 检测。布局使用应用实际断点与系统窗口信息工具报告用于定位问题修复效果仍由同一任务复验。先选状态再选尺寸空结果、长标题、加载失败和大字体往往比正常首页更能暴露问题。测试矩阵应同时包含设备形态、窗口宽度、字体、主题和页面状态但不必穷举所有组合。interfaceUxCase{caseId:string;windowClass:compact|medium|expanded;fontScale:number;theme:light|dark;contentState:normal|empty|error|long_text;task:string;}窗口类别是应用自己的测试分组不代表系统固定断点值。先根据内容最小可用宽度确定布局再映射到真实窗口尺寸。一个页面至少检查三个可用性问题第一是信息是否可读包括文字截断、对比与行长第二是动作是否可达包括遮挡、点击区域和滚动第三是状态是否连续包括尺寸变化后选择、输入和阅读位置是否保留。布局稳定并不要求所有设备长得一样。手机可以单栏逐页大屏可以目录与内容并列但同一条目和同一收藏状态应一致。系统检测结果要回到具体动作工具可能指出遮挡、不可操作区或布局异常。修复前先定位对应页面和触发条件不要看到提示就全局放大间距。某个弹窗在大字体下超高可能需要内部滚动而不是缩小所有正文。记录问题 ID、检测截图、窗口条件与用户动作。修复后用相同条件重跑保留前后证据。没有对应页面状态的报告条目很难判断问题是否真正解决。分栏切换时保存轻量状态宽窗口变窄时当前详情应成为单栏目标恢复大屏时目录仍选中同一条目。不要依赖左右容器是否还存在来保存业务选择应把选中 ID 与阅读位置放在合适状态层。窗口变化 → 读取当前业务目标 → 选择布局形式 → 重建可见组件 → 恢复输入和阅读位置模型与图片可以重新创建用户的输入与阅读位置不能被无意清空。异步请求返回时仍需验证页面和目标 ID避免尺寸变化后显示上一条目的内容。触控、鼠标和键盘分别有重点触控关注目标大小与手势冲突鼠标关注悬停反馈和滚轮作用区域键盘关注焦点顺序与可执行动作。一个按钮在触摸下可用不代表键盘用户能够到达它。在阅读页弹出注释后焦点应进入合理位置关闭后回到触发入口。不要让焦点留在已经隐藏的分栏组件中造成看似没有响应的操作。最小 Demo 保留缺陷与修复版本选三种典型窗口宽度和两组特殊内容先记录一轮完整任务再修复高影响问题。最终结果应说明任务是否完成、需要几次操作、是否丢失输入而不仅是“适配通过”。性能也要观察。为了适配大屏同时加载多份 3D 场景可能让布局变漂亮却拖慢交互。只为可见区域分配重资源其他区域保存轻量状态。矩阵按失效原因选代表项代表条件主要观察目标窄窗口与长标题主操作能否完整定位与触发双栏与大字体阅读区域是否挤压、焦点是否可达详情阅读中改变窗口条目和阅读位置是否连续键盘打开后再切栏输入区域与返回出口是否仍可用穷举所有尺寸会增加执行成本按断点两侧和高风险任务选代表项更便于发现问题再根据缺陷扩展。先用实际页面确认断点与任务再运行检测工具最后将报告逐项回到页面复现。工具没有命中不代表人工任务必然通过两种结果分别保存。参考DevEco Testing 26 版本说明、HarmonyOS 设计资源。长文、大字号与空态使用同一阅读任务列表与正文占用剩余高度长文通过 Scroll 浏览字号按钮修改同一状态字段列表标题和详情正文同步采用对应字号。当前固定行高还需要用更长标题、多窗口宽度检查不能仅凭一组文字认定所有排版通过。import{common}fromkit.AbilityKit;import{ReadingEntry,ReadingRepository}from../services/ReadingRepository;import{LabTheme}from../common/LabTheme;interfaceReadingRouteParams{entryId?:string;}EntryComponentstruct ReadingLabPage{Statequery:string;Stateentries:ReadingEntry[][];Stateselected:ReadingEntry|undefinedundefined;StatefavoriteSaved:booleanfalse;Stateready:booleanfalse;Statebusy:booleanfalse;Statefeedback:string正在读取本地收藏;StatelargeText:booleanfalse;privaterepository:ReadingRepositorynewReadingRepository();privateactive:booleantrue;aboutToAppear():void{this.activetrue;this.open();}aboutToDisappear():void{this.activefalse;}onBackPress():boolean{if(this.selected){this.returnToResults();returntrue;}returnfalse;}privateasyncopen():Promisevoid{try{awaitthis.repository.open(this.getUIContext().getHostContext()ascommon.UIAbilityContext);if(!this.active){return;}this.entriesthis.repository.search(this.query);this.readytrue;this.feedback可搜索名称或正文;constparamsthis.getUIContext().getRouter().getParams()asReadingRouteParams|undefined;if(params?.entryId){constentrythis.entries.find((item:ReadingEntry)item.idparams.entryId);if(entry){this.select(entry);}else{this.feedback关联条目不存在可从列表选择;}}}catch(error){if(this.active){this.feedback存储不可用${(errorasError).message};}}}privateselect(entry:ReadingEntry):void{this.selectedentry;this.favoriteSavedthis.repository.isFavorite(entry.id);this.feedbackthis.favoriteSaved?已收藏从本地记录恢复:尚未收藏;}privatereturnToResults():void{this.selectedundefined;this.favoriteSavedfalse;if(this.ready){this.feedback可搜索名称或正文;}}privateasyncsave():Promisevoid{if(!this.selected||this.busy||this.favoriteSaved){return;}constidthis.selected.id;this.busytrue;try{awaitthis.repository.favorite(id);if(this.activethis.selected?.idid){this.favoriteSavedtrue;this.feedback收藏已保存到本机;}}catch(error){if(this.activethis.selected?.idid){this.feedback收藏失败${(errorasError).message};}}finally{if(this.active){this.busyfalse;}}}build(){Column({space:14}){Text(15 / 23 · 阅读任务实验).fontSize(24).fontWeight(FontWeight.Bold)Button(this.largeText?恢复正文字号:放大正文字号).id(readingFont).onClick((){this.largeText!this.largeText;})if(!this.selected){TextInput({text:this.query,placeholder:搜索神兽名称或正文}).id(readingSearch).accessibilityText(搜索神兽名称或正文).enabled(this.ready).onChange((value:string){this.queryvalue;this.entriesthis.repository.search(value);if(this.ready){this.feedback可搜索名称或正文;}})Text(找到${this.entries.length}条).fontSize(16).id(readingCount)List({space:12}){ForEach(this.entries,(entry:ReadingEntry){ListItem(){Button(entry.title).id(readingEntry-${entry.id}).width(100%).height(88).fontSize(this.largeText?24:18).onClick((){this.select(entry);})}},(entry:ReadingEntry)entry.id)}.layoutWeight(1).width(100%)if(this.entries.length0this.ready){Text(没有匹配条目请修改关键词).id(readingEmpty)}}else{Text(this.selected.title).fontSize(this.largeText?28:22).id(readingTitle)Text(this.selected.source).fontSize(16)Scroll(){Text(this.selected.body).fontSize(this.largeText?26:19).width(100%)}.layoutWeight(1).width(100%)Button(this.favoriteSaved?已收藏:收藏此条目).id(readingFavorite).enabled(!this.busy!this.favoriteSaved).onClick((){this.save();})Button(返回搜索结果).id(readingBack).onClick((){this.returnToResults();})}Text(this.feedback).fontSize(15).id(readingFeedback)Button(返回目录).onClick((){this.getUIContext().getRouter().back();})}.padding(20).width(100%).height(100%).backgroundColor(LabTheme.background)}}操作或边界应检查的结果空结果输入仍可操作且有返回途径放大字号正文可滚动收藏按钮可触达恢复字号内容与收藏状态不丢失在真机上检查内容状态与字号2026-09-20HBN-AL80API 26上搜索“旋龟”得到一条结果输入“不存在样本”后得到零条搜索输入和返回入口继续可用。列表反馈为“可搜索名称或正文”详情的收藏提示不会继续显示在列表中。放大字号后旋龟正文和操作按钮仍可见。字号保存在页面状态中重启应用会恢复默认收藏写入本地存储重新选择旋龟可读回“已收藏”。两种状态使用不同的保存周期。短正文在滚动区域内偏居中若采用从顶部开始的阅读排版需要同时调整 Scroll 对齐和内容布局。
返回列表