应用定位:园艺养成模拟类小应用
技术栈:HarmonyOS NEXT + ArkTS + Stage模型
源码行数:164行
核心亮点:动态花盆数量管理、5种花卉品种、3阶段生长系统、多花盆Grid布局、花盆新增机制


一、引言

养花模拟器是系列中第一个支持动态增加"实体"数量的应用——用户可以不断新增花盆。

新概念包括:

  • 动态花盆管理:从3盆开始,最多6盆
  • 5种花卉品种:玫瑰/郁金香/向日葵/樱花/杜鹃
  • 3阶段生长:种子→幼苗→盛开
  • 每盆独立状态:每个花盆有自己的生长进度
  • 花盆新增机制:消费"种子"增加花盆

二、需求分析

需求ID 功能 描述
F1 花盆Grid 自适应花盆数量展示
F2 花盆选中 点击选中花盆
F3 浇水 消耗水促进生长
F4 施肥 消耗肥料快速生长
F5 换花种 切换种植的花卉品种
F6 新增花盆 添加新花盆
F7 生长阶段 种子→幼苗→盛开

三、动态花盆系统

3.1 动态数组

@State flowers: string[] = ['🌱', '🌱', '🌱'];
@State growth: number[] = [0, 0, 0];

初始3个花盆,通过 push() 动态增加:

if (this.flowers.length >= 6) {
  this.message = '最多种6盆花🌷';
  return;
}
this.flowers.push('🌱');
this.growth.push(0);

边界保护:最多6盆。

3.2 Grid自适应渲染

Grid自动适配 flowers 数组长度——3盆时3列,6盆时排列更紧密。


四、5种花卉品种

private flowerTypes: string[] = ['🌹 玫瑰', '🌷 郁金香', '🌻 向日葵', '🌸 樱花', '🌺 杜鹃'];
private stageEmojis: string[][] = [
  ['🌱', '🌿', '🌹'],  // 玫瑰
  ['🌱', '🌿', '🌷'],  // 郁金香
  ['🌱', '🌿', '🌻'],  // 向日葵
  ['🌱', '🌿', '🌸'],  // 樱花
  ['🌱', '🌿', '🌺'],  // 杜鹃
];

3阶段成长:种子(🌱) → 幼苗(🌿) → 开花(🌹/🌷/🌻/🌸/🌺)


五、生长机制

this.growth[this.selectedFlower] = Math.min(100, this.growth[this.selectedFlower] + 15);
let stageIdx = Math.min(2, Math.floor(this.growth[this.selectedFlower] / 34));
this.flowers[this.selectedFlower] = this.stageEmojis[this.typeIndex][stageIdx];

阶段划分

  • 0-33%:种子(🌱)
  • 34-67%:幼苗(🌿)
  • 68-100%:开花(🌹等)

浇水+15%,施肥+25%。


六、总结

养花模拟器展示了ArkTS在"园艺模拟"场景的开发模式:

  1. 动态花盆管理push() 增加 + 长度限制
  2. 多品种系统:品种×阶段 二维emoji数组
  3. 选中操作模式:先选花盆再操作
  4. 3阶段生长:种子→幼苗→开花

Logo

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

更多推荐