HarmonyOS7应用《拼棋派对》实战:折叠屏与电脑的窗口布局适配

折叠屏展开以后,应用得到更多宽度,但不一定得到更多高度;电脑窗口也可能比手机横屏更窄。适配《拼棋派对》时,先看当前内容区域,再决定导航、棋盘和工具怎样分配空间,比只按设备名称放大控件更可靠。

本篇接着面对面布局,分析窗口尺寸、设备类型与状态保留。代码对应1.0.19;折叠演示来自本系列API26模拟器取证,电脑演示采用此前R14适配阶段的模拟器记录,分别标明范围。

本文目录

测量应用实际内容区域

主页面给根组件设置onAreaChange,更新viewportWidth和viewportHeight。这里测量的是组件可用区域,布局计算不直接采用显示器物理像素。

typescript 复制代码
.onAreaChange((oldArea, newArea) => {
  this.viewportWidth = this.areaNumber(newArea.width);
  this.viewportHeight = this.areaNumber(newArea.height);
})

电脑标题栏、系统区域、导航和内边距都会减少玩法空间。外层窗口足够大,并不等于棋盘区域也一样大。项目后续通过duelContentWidth等函数扣除导航与边距,玩法需要继续扣除自己的标题、状态和工具。

面积变化事件可能连续触发。计算函数应从当前状态推导,不在测量回调里重新创建棋局或写入本地记录。否则拖动窗口会重复开局,甚至生成多条无意义战绩。

宽高与设备类型共同判断

当前布局函数有大屏、短横屏、桌面与座位偏好等条件。电脑的双人象棋与双人24点固定左右同向;移动设备面对面模式保留上下朝向。设备类型决定操作场景,窗口尺寸决定空间组织。

例如侧边导航的出现会改变内容宽度,玩法网格列数也随布局变化。大屏目录可以多列,短横屏则优先把棋盘与工具分开。阈值属于当前产品的布局选择,不是所有鸿蒙应用通用的标准断点。

输入条件 需要解决的问题
当前宽度 横向能放几列、工具是否并排
当前高度 棋盘、状态和按钮能否完整显示
设备类型 触摸、鼠标与键盘的主要使用方式
座位偏好 双方同向还是面对面阅读
导航占用 玩法实际可用宽度还剩多少

不要把其中一个条件替代所有条件。大屏设备的小窗口仍需要紧凑布局,手机的展开窗口也仍然属于手机设备类型。

布局重排不重新开局

棋盘数组、题号、双方分数与当前选择保存在页面状态中,Builder根据窗口条件选择排列。重排改变的是组件结构,不能把初始化函数放在每次布局判断里执行。

双人24点的面板事件始终携带player,B在上方或右方都调用B的逻辑。象棋共用一份90点数组,窗口变化不会改变棋子索引。这样视图可以调整,玩法状态仍有稳定身份。

检查状态保留时应选一个有变化的局面:走过一步棋、合并过一张牌或已获得一分,再改变窗口。只观察初始棋盘,即使发生了隐蔽重置也很难发现。

本系列第20篇在单屏、双屏、三屏间保留了双人24点第3/6题与A1:B1比分。这证明当时状态保留正常,但不等于各形态操作区都完整。

默认窗口和最大化对照

下面是此前电脑模拟器R14阶段的双人24点窗口效果。双方区域同向,默认窗口和最大化中都需要给牌面、表达式与工具保留位置。

这组素材用于解释已经做过的窗口适配,不是本轮重新启动电脑模拟器的验收。当前源码继续沿用同向策略,仍需在产品修改后重新安装相同构建包验证。

折叠形态对照则来自本系列本轮手机模拟器:

对照同一页面比对照不同玩法更容易发现问题:题目与按钮相同,只改变窗口,才能看清哪些空间被重新分配、哪些工具离开可见区域。

从裁切问题反推高度预算

本轮双屏形态中,A区底部的撤销、清空和提交被裁切。修复顺序应是先计算总可用高度,扣除中央栏和两方工具最小高度,再分配牌面与表达式,最后调整间距。

不能只按宽度给牌设置尺寸:宽度增长会让内容越来越高,两个面板叠放时尤其明显。也不应先把字缩到难读,PC正文和控件文字至少满足项目10fp下限,触摸设备还需保持可点范围。

建议把验收表拆成两列:状态保留与布局可用。前者检查数组、分数、题号,后者检查裁切、重叠、文字和按钮。此次双屏是前者通过、后者有缺口,文章如实保留这个结果。

源码入口:pages/Index.ets 的根区域测量、useDuelSideBySide、useDuelCompactVertical 与各玩法尺寸函数。参考HarmonyOS多设备适配示例。下一篇继续处理电脑输入与焦点恢复。

相关推荐
2501_946244781 小时前
开源鸿蒙平台 CMP 三方库「Waterfall」适配全流程
华为·开源·harmonyos
2401_zq136y031 小时前
开源鸿蒙平台 CMP 三方库「Jewel」适配全流程
华为·开源·harmonyos
2601_949480063 小时前
开源鸿蒙平台 KMP 三方库「AutoLinkText」适配全流程
华为·开源·harmonyos
JoyCong19983 小时前
ToDesk鸿蒙PC端又焕新!远控更稳、操作更准,跨端办公如本地
运维·华为·智能手机·harmonyos·远程工作
大雷神3 小时前
HarmonyOS7应用《拼棋派对》实战:深浅主题、控件对比度与统一样式
harmonyos·arkui·harmonyos 7.0·玩转 arkts
OH_TPC3 小时前
HarmonyOS APP开发---"动效君"UI动效素材库App,需要用到这个库
harmonyos
行者-全栈开发4 小时前
【鸿蒙心迹】三方库移植(一)——NAPI 把 C/C++ 库桥接到 ArkTS 的完整链路(HarmonyOS 7.x)
harmonyos·arkts·交叉编译·c/c++·napi·三方库移植
2601_949480064 小时前
开源鸿蒙平台 CMP 三方库「reveal」适配全流程
华为·开源·harmonyos
2401_zq136y034 小时前
开源鸿蒙平台 CMP 三方库「KToast」适配全流程
华为·开源·harmonyos