拼棋派对开发实战系列封面

两个人把手机或平板放在桌面中间,坐在设备两侧,看到的屏幕方向相反。如果把双方操作区都朝同一个方向显示,其中一人就要倒着读数字和按钮。双人适配需要先确定人的座位,再决定屏幕怎么分区。

《拼棋派对》为移动设备提供面对面和同向座位,电脑默认左右同向。本篇以双人24点说明区域顺序、旋转、事件归属和空间预算。代码对应1.0.19;本轮使用API26三折叠模拟器观察手机单屏与展开变化,平板图采用此前归档的模拟器适配证据。

本文目录

座位方向与窗口方向分开

横屏描述窗口宽高,面对面描述两个人相对于设备的位置。平板横放时,两人仍然可以一人在上、一人在下;手机竖放时,也可能两人并肩看同一侧。不能用“横屏=true”直接推出“双方左右排列”。

项目seatOrientation有auto、face、side三个值。face用于设备平放对坐,B区域朝上方玩家旋转;side用于两人同向看屏幕,双方文字同向。窗口宽度决定可用空间,座位设置决定阅读和操作朝向。

场景合适的区域组织需要额外检查
手机平放,两人对坐B在上、A在下,B旋转180度双方按钮是否点得到
平板平放,两人对坐保持各自朝向,利用更宽区域留白与工具是否挤占牌面
两人并肩看平板同向排列,可按空间左右组织玩家身份标识是否明确
电脑前两人共同操作左右同向键盘与鼠标入口是否对应玩家

用户偏好和设备约束需要共同参与选择,不能让一个全局旋转开关无条件影响电脑。

先判断设备,再应用用户偏好

当前useDuelFaceToFaceSeat先排除桌面设备,再读取face或side,auto在移动设备上默认面对面:

private useDuelFaceToFaceSeat(): boolean {
  if (this.isDesktopDevice()) {
    return false;
  }
  if (this.seatOrientation === 'face') {
    return true;
  }
  if (this.seatOrientation === 'side') {
    return false;
  }
  return true;
}

useDuelSideBySide则先让电脑返回true,面对面返回false,再依据短横屏或大窗口选择左右布局。判断顺序很重要:若先看viewportWidth,横放平板即使选了面对面,也可能被大屏分支强制改成左右。

设置页显示座位含义,也说明电脑上的双人象棋和双人24点固定左右同向。功能说明应和具体玩法函数一致,不把某个共用名字推断成所有玩法都采用完全同一逻辑。

区域旋转不改变玩家身份

双人24点把player与inverted作为面板参数。面对面布局上方为B,下方为A;B面板旋转180度,内部仍然调用B的选牌、运算和提交函数。

this.DuelTwentyFourPlayerPanel('B', true);
this.Duel24CompactHeader();
this.DuelTwentyFourPlayerPanel('A', false);

这是上下布局的组件顺序节选。面板内部按钮的归属依赖player,不依赖当前屏幕像素位置。因此旋转后也不会把B的提交算到A。

旋转显示层时,不应同时倒序牌槽或交换玩家状态。数据顺序、视图方向和点击区域是不同职责。过度旋转子元素还可能让文字旋转两次,回到错误方向;应明确哪些容器已经承担朝向。

象棋的棋盘共用一份,主要旋转黑方棋子文字;双人24点每人有独立牌局,可以旋转整个玩家区域。这说明适配策略必须跟着玩法交互结构走,不能给所有页面套同一个rotate。

手机与大屏的空间预算

手机面对面把高度分给两人后,每方只有半屏附近的空间。牌面、表达式、四个运算符和撤销清空提交都要一起预算。仅把棋盘尽可能放大,往往把工具压到看不清或超出边界。

大屏也不能把同一套控件无限拉宽。牌和按钮适度增长,表达式留足空间,同时让中央题号、比分和难度成为双方可理解的共同状态。触摸区域应跟随实际视觉位置,不能只增加透明热区而覆盖邻近按钮。

当前布局函数同时读取宽高,短横屏还有专门分支。比例布局负责区域分配,最小字号、控件高度和边界约束负责可用性。这些条件要一起检查:比例正确不保证字可读,尺寸足够不保证没有裁切。

对普通文字和实际背景应至少达到4.5:1,大字、图标、边框与关键状态至少3:1。应用有深浅主题与自定义背景,文字需显式设色;本篇布局演示不能替代全部主题的对比度验收。

效果对照与证据范围

本轮打开同一个双人24点页面,通过模拟器单屏、双屏、三屏变化观察区域布局。题目与双方状态保持在同一局,图中可以对照各形态的牌面、按钮和中央栏。

同一局双人24点在单屏、双屏和展开形态中的面对面布局

这组动态图来自三折叠模拟器,说明手机窗口与展开窗口的布局变化。展开形态不是平板设备类型,不能据此声称本轮平板已重新验收。

本次双屏形态还有一个明确问题:A区域底部的撤销、清空和提交工具超出可见高度。题号仍为3/6、双方仍为1分,说明状态保留正常,布局高度预算却不足。修复应重新分配两块玩家面板与中央栏的高度,检查工具行的最小空间,不能只把所有文字缩小。此问题已记录,本轮文章工作尚未修改产品代码。

下面补充此前适配阶段的平板模拟器证据,展示双人24点在平板上面对面操作与提交。它用于说明已有平板效果,属于历史主包版本的记录。

此前平板模拟器面对面双人24点,A计算与提交的效果

平板和手机图的价值在于同一玩法如何服务不同座位和空间;它们不是把多个无关玩法拼成设备展示。平台版本、包版本和拍摄轮次在内部证据清单中保留,正文不把历史图当作今天的新测试。

面向两名玩家的验收

先让A计算一步,确认B牌面不变;再让B操作,确认按钮命中和比分归属。随后旋转或改变屏幕形态,检查牌面、选择、题号和得分是否保留,中央栏是否仍在可见区域。最后由一方提交,确认双方共同换题。

布局上要看双方最外侧按钮、旋转文字、表达式截断和退出入口;交互上要看事件归属、触摸热区、状态保留和操作反馈。截图能说明某一时刻的画面,只有操作过程才能证明另一位玩家也用得起来。

本轮补拍形态变化,双人算题与平板提交使用已归档实操。本轮没有重做独立平板设备的安装与全流程回归。后续窗口适配篇会进一步讨论折叠形态与电脑最大化。

源码入口:pages/Index.ets 的 useDuelFaceToFaceSeat、useDuelSideBySide、DuelTwentyFourPage、DuelTwentyFourPlayerPanel 与座位设置。可结合HarmonyOS多设备适配官方示例理解场景与布局之间的关系。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐