HarmonyOS 小游戏《对战五子棋》开发第23篇 - 保持棋盘正方形

一个属性解决正方形问题——ArkUI布局的优雅之处棋盘图片问题如何保证棋盘永远是正方形棋盘必须是正方形15x15等比例但屏幕通常是长方形。如果设置width(100%)和height(100%)棋盘会被拉伸变形。方案对比方案1硬编码尺寸不推荐Canvas(this.context).width(320).height(320)问题不同设备上尺寸固定小屏太大、大屏太小。方案2手动计算不推荐Canvas(this.context).width(100%).height(this.calculatedHeight)// 需要手动计算问题需要监听宽度变化手动计算高度代码复杂。方案3aspectRatio本项目使用Canvas(this.context).width(100%).aspectRatio(1)// 宽高比1:1 → 正方形aspectRatio详解aspectRatio(ratio)设置组件的宽高比aspectRatio(1)宽高正方形aspectRatio(2)宽2×高aspectRatio(0.5)高2×宽工作原理当设置了宽度如width(100%)aspectRatio自动计算高度。宽度 父容器宽度 (如360vp) 高度 宽度 / aspectRatio 360 / 1 360vp → 正方形棋盘容器的布局Column(){ChessBoardView({boardData:this.boardData,lastMoveRow:this.lastMoveRow,lastMoveCol:this.lastMoveCol,onCellClick:(row:number,col:number){this.onCellClick(row,col);}})}.width(92%)// 棋盘容器占页面92%.backgroundColor(#D4A868)// 木色背景.borderRadius(8)// 圆角.clip(true)// 裁剪超出部分布局层次页面 (100%) └─ Column (92%) ← 棋盘外框有边距 └─ Canvas (100%, aspectRatio 1) ← 棋盘画布正方形clip(true)的作用.clip(true)Canvas是矩形但外层Column有borderRadius(8)圆角。clip(true)让Canvas被裁剪为圆角矩形避免棋盘四角超出圆角边框。无clip: 有clip: ┌──────────┐ ╭──────────╮ │ Canvas │ │ Canvas │ │ (直角) │ │ (圆角) │ └──────────┘ ╰──────────╯布局完整性整个页面的布局结构Column(){// 顶部导航栏 (固定高度56)Row(){...}.height(56)// 状态栏 (自适应)Row(){...}.width(92%)// 状态文字 (自适应)Text(...)// 棋盘 (92%宽度正方形)Column(){ChessBoardView(...)}.width(92%).borderRadius(8).clip(true)// 底部按钮 (自适应)Row(){...}.width(92%)}.width(100%).height(100%).backgroundColor(#F5F0E8)垂直空间分配导航栏固定56vp状态栏内容高度棋盘92%宽度的正方形底部按钮内容高度剩余空间自动分配在小屏设备上的适配如果屏幕太小棋盘可能占满垂直空间。此时需要确保其他元素仍然可见Column(){Row(){...}.height(56)// 导航栏固定Row(){...}// 状态栏Text(...)// 状态文字Column(){ChessBoardView(...)}.width(92%)// 棋盘Row(){...}// 底部按钮}ArkUI的Column默认从上到下排列如果内容超出屏幕可以滚动。但五子棋的布局通常不会超出——棋盘宽度92%意味着高度也是92%宽在大多数设备上都能容纳。