应用定位田园生活模拟类小应用技术栈HarmonyOS NEXT ArkTS Stage模型源码行数161行核心亮点Grid网格农场布局、多阶段植物生长、地块选中系统、经济循环系统一、引言种菜模拟器是系列中第一个使用Grid网格布局和地块选中系统的应用。它模拟了从播种→浇水→生长→收获→出售的完整种植循环。从技术角度看种菜模拟器引入了多个全新的ArkTS概念Grid网格布局3×2 的地块网格每个地块独立管理状态多阶段生长系统从种子到成熟经历6个阶段每个阶段展示不同emoji地块选中交互玩家选中特定地块进行操作资源管理系统种子、水、金钱三种资源的协同管理商店系统用金钱购买种子和水二、需求分析2.1 功能需求需求ID功能描述F1农场网格3×2共6块地F2地块选中点击选择地块高亮显示F3播种在地块上消耗种子播种F4浇水消耗水促进生长F5多阶段生长幼苗→成长→开花→结果→成熟F6收获成熟后收获获得金钱F7商店用金钱购买种子和水F8资源管理种子、水、金钱三种资源2.2 状态模型State crops: string[] [, , , , , ]; State growth: number[] [0, 0, 0, 0, 0, 0]; State seeds: number 10; State water: number 50; State money: number 0; State message: string 欢迎来到农场; State selectedPlot: number -1;关键设计使用两个平行数组管理地块状态crops每个地块当前显示的emojigrowth每个地块的生长进度0-100这种设计基于一个状态一个变量的原则避免了对象数组的复杂性。三、Grid网格布局3.1 网格定义Grid() { ForEach(this.crops, (item: string, index: number) { GridItem() { Column() { Text(item) .fontSize(36) if (this.selectedPlot index) { Text(已选中) .fontSize(12) .fontColor(#4CAF50) } } .width(80) .height(80) .backgroundColor(this.selectedPlot index ? #E8F5E9 : #F1F8E9) .borderRadius(10) .border({ width: this.selectedPlot index ? 2 : 1, color: this.selectedPlot index ? #4CAF50 : #CCC }) .onClick(() { this.selectedPlot index; }) } }) } .columnsTemplate(1fr 1fr 1fr) .rowsTemplate(1fr 1fr) .columnsGap(10) .rowsGap(10)3.2 Grid配置解析属性值说明columnsTemplate1fr 1fr 1fr三列等宽rowsTemplate1fr 1fr两行等高columnsGap10列间距10pxrowsGap10行间距10pxfr是 Grid 布局中的弹性单位fraction1fr表示等分可用空间。3.3 选中高亮效果地块选中时通过三层视觉反馈标识文字提示显示已选中标签背景色变化从#F1F8E9变为#E8F5E9边框强调从 1px#CCC变为 2px#4CAF50这种多重反馈确保用户清晰地知道当前操作的目标地块。四、多阶段生长系统4.1 生长阶段定义private stage: string[] [, , , , , ];6个阶段对应不同的生长状态阶段进度emoji描述00-16%种子117-33%发芽234-50%幼苗351-66%生长467-83%开花584-100%结果/成熟4.2 生长阶段计算let stageIdx Math.floor(this.growth[this.selectedPlot] / 25); this.crops[this.selectedPlot] this.stage[Math.min(stageIdx, 5)];每次浇水后重新计算当前生长阶段并更新显示的emoji。公式growth / 25→ 因为100%分为6个阶段但使用5个阈值点25, 50, 75, 100Math.min(stageIdx, 5)防止超出数组。4.3 浇水促进生长this.growth[this.selectedPlot] Math.min(100, this.growth[this.selectedPlot] 25);每次浇水增加25%生长进度。从种子到成熟需要100/25 4次浇水。加上播种操作一共5步完成一轮种植。五、播种与收获5.1 播种逻辑if (this.crops[this.selectedPlot] ! ) { this.message 这块地已经有作物了; return; } this.seeds--; this.crops[this.selectedPlot] ; this.growth[this.selectedPlot] 0;三守卫未选中地块 → “请选择一块地”种子不足 → “种子用完了”地块已有作物 → “已有作物”5.2 收获逻辑if (this.growth[this.selectedPlot] 100) { this.message 还没成熟呢再等等...⏳; return; } let earned 10 Math.floor(Math.random() * 20); this.money earned; this.crops[this.selectedPlot] ; this.growth[this.selectedPlot] 0;收获金额10-29元随机包含基础收益 浮动收益。成熟后地块重置为空 种子状态。六、经济循环系统6.1 三资源循环种子 → 播种 → 浇水 → 成熟 → 收获 ↑ ↓ └────── 商店 (5元) ←─── 金钱 └────── 水 (5元配3种子5水)资源流转种子消耗品→ 播种水消耗品→ 浇水金钱中间品→ 购买种子和水收获 → 金钱6.2 商店系统if (this.money 5) { this.message 钱不够买不起种子; return; } this.money - 5; this.seeds 3; this.water 5;5元购买3个种子 5单位水。这个定价考虑了投入产出比投入5元商店潜在产出每块地收获10-29元6块地满种一轮潜在产出60-174元净收益55-169元ROI投资回报率(55~169) / 5 1100% ~ 3380%— 非常高的回报率确保玩家能正向循环。七、UI布局与交互7.1 顶部信息栏Row() { Text( 种子 this.seeds) .margin({ right: 15 }) Text( 水 this.water) .margin({ right: 15 }) Text( this.money 元) }三种资源横向排列方便用户随时查看库存。7.2 操作按钮排列第一行 播种 | 浇水 | 收获 第二行 商店播种、浇水、收获三个核心操作在同一行商店在一行单独放置。这种分组方式按操作频率划分——核心操作在上辅助操作在下。八、与养猫模拟器的对比维度种菜模拟器养猫模拟器核心布局Grid网格ColumnProgress状态类型平行数组独立标量选中操作地块选中无选中生长机制手动浇水自动衰减经济系统✅ 完整循环❌ 无操作密度高(5操作)中(4操作)九、扩展思路9.1 不同作物种类private cropTypes [ { name: 番茄, stages: [,,,], price: 15 }, { name: 胡萝卜, stages: [,,,], price: 12 }, { name: 茄子, stages: [,,,], price: 18 }, ];9.2 天气系统State weather: string ☀️ 晴天; // 随机天气变化 setInterval(() { let weathers [☀️ 晴天, ☁️ 阴天, ️ 雨天, ⛅ 多云]; this.weather weathers[Math.floor(Math.random() * weathers.length)]; if (this.weather ️ 雨天) { // 自动浇水效果 } }, 10000);9.3 害虫系统State hasPests: boolean[] [false, false, false, false, false, false]; // 随机出现害虫 if (Math.random() 0.8) { this.hasPests[plotIdx] true; }9.4 数据持久化import { Preferences } from kit.ArkData; // 保存农场状态 Preferences.save(farm_state, JSON.stringify({ crops: this.crops, growth: this.growth, seeds: this.seeds, money: this.money }));十、总结种菜模拟器展示了ArkTS在农场模拟场景下的开发模式Grid网格布局使用 Grid GridItem 实现3×2农场平行数组管理两个数组crops显示/growth进度管理6块地选中交互点击选中高亮操作的靶向机制多阶段生长从种子到成熟的6阶段emoji展示经济循环播种→生长→收获→卖钱→买种子的完整闭环种菜模拟器是系列中UI布局最复杂、交互维度最多的应用之一为后续更复杂的模拟器垫定了技术基础。