鸿蒙 NEXT 开发案例：计数器

@ObservedV2class CounterItem {  id: number = ++Index.counterId;  @Trace name: string;  @Trace count: number = 0;  @Trace scale: ScaleOptions = { x: 1, y: 1 };  upStep: number = 1;  downStep: number = 1;
  constructor(name: string) {    this.name = name;  }}

@Entry@Componentstruct Index {  static counterStorageKey: string = "counterStorageKey";  static counterId: number = 0;
  @State listSpacing: number = 20;  @State listItemHeight: number = 120;  @State baseFontSize: number = 60;  @State @Watch('updateTotalCount') counters: CounterItem[] = [];  @State totalCount: number = 0;  @State isSheetVisible: boolean = false;  @State selectedIndex: number = 0;
  // ...其他方法}

saveDataToLocal() {  const saveData: object[] = this.counters.map(counter => ({    count: counter.count,    name: counter.name,    upStep: counter.upStep,    downStep: counter.downStep,  }));
  this.dataPreferences?.putSync(Index.counterStorageKey, JSON.stringify(saveData));  this.dataPreferences?.flush();}

@BuilderitemStart(index: number) {  Row() {    Text('重置').fontColor(Color.White).fontSize('40lpx').textAlign(TextAlign.Center).width('180lpx');  }  .height('100%')  .backgroundColor(Color.Orange)  .justifyContent(FlexAlign.SpaceEvenly)  .borderRadius({ topLeft: 10, bottomLeft: 10 })  .onClick(() => {    this.counters[index].count = 0;    this.updateTotalCount();    this.listScroller.closeAllSwipeActions();  });}

this.counters.unshift(new CounterItem(`新计数项${Index.counterId}`));this.listScroller.scrollTo({ xOffset: 0, yOffset: 0 });this.counters[0].scale = { x: 0.8, y: 0.8 };
animateTo({  duration: 1000,  curve: curves.springCurve(0, 10, 80, 10),  iterations: 1,  onFinish: () => {}}, () => {  this.counters[0].scale = { x: 1, y: 1 };});

import { curves, promptAction } from '@kit.ArkUI' // 导入动画曲线和提示操作import { preferences } from '@kit.ArkData' // 导入偏好设置模块
@ObservedV2  // 观察者装饰器，监控状态变化class CounterItem {  id: number = ++Index.counterId // 计数器ID，自动递增  @Trace name: string // 计数器名称  @Trace count: number = 0 // 计数器当前值，初始为0  @Trace scale: ScaleOptions = { x: 1, y: 1 } // 计数器缩放比例，初始为1  upStep: number = 1 // 增加步长，初始为1  downStep: number = 1 // 减少步长，初始为1
  constructor(name: string) { // 构造函数，初始化计数器名称    this.name = name  }}
@Entry  // 入口组件装饰器@Component  // 组件装饰器struct Index {  static counterStorageKey: string = "counterStorageKey" // 存储计数器数据的键  static counterId: number = 0 // 静态计数器ID  @State listSpacing: number = 20 // 列表项间距  @State listItemHeight: number = 120 // 列表项高度  @State baseFontSize: number = 60 // 基础字体大小  @State @Watch('updateTotalCount') counters: CounterItem[] = [] // 计数器数组，监控总计数更新  @State totalCount: number = 0 // 总计数  @State isSheetVisible: boolean = false // 控制底部弹出表单的可见性  @State selectedIndex: number = 0 // 当前选中的计数器索引  listScroller: ListScroller = new ListScroller() // 列表滚动器实例  dataPreferences: preferences.Preferences | undefined = undefined // 偏好设置实例
  updateTotalCount() { // 更新总计数的方法    let total = 0; // 初始化总计数    for (let i = 0; i < this.counters.length; i++) { // 遍历计数器数组      total += this.counters[i].count // 累加每个计数器的count值    }    this.totalCount = total // 更新总计数    this.saveDataToLocal() // 保存数据到本地  }
  saveDataToLocal() { // 保存计数器数据到本地的方法    const saveData: object[] = [] // 初始化保存数据的数组    for (let i = 0; i < this.counters.length; i++) { // 遍历计数器数组      let counter: CounterItem = this.counters[i] // 获取当前计数器      saveData.push(Object({        // 将计数器数据添加到保存数组        count: counter.count,        name: counter.name,        upStep: counter.upStep,        downStep: counter.downStep,      }))    }    this.dataPreferences?.putSync(Index.counterStorageKey, JSON.stringify(saveData)) // 将数据保存到偏好设置    this.dataPreferences?.flush() // 刷新偏好设置  }
  @Builder  // 构建器装饰器  itemStart(index: number) { // 列表项左侧的重置按钮    Row() {      Text('重置').fontColor(Color.White).fontSize('40lpx')// 显示“重置”文本        .textAlign(TextAlign.Center)// 文本居中        .width('180lpx') // 设置宽度    }    .height('100%') // 设置高度    .backgroundColor(Color.Orange) // 设置背景颜色    .justifyContent(FlexAlign.SpaceEvenly) // 设置内容均匀分布    .borderRadius({ topLeft: 10, bottomLeft: 10 }) // 设置圆角    .onClick(() => { // 点击事件      this.counters[index].count = 0 // 重置计数器的count为0      this.updateTotalCount() // 更新总计数      this.listScroller.closeAllSwipeActions() // 关闭所有滑动操作    })  }
  @Builder  // 构建器装饰器  itemEnd(index: number) { // 列表项右侧的删除按钮    Row() {      Text('删除').fontColor(Color.White).fontSize('40lpx')// 显示“删除”文本        .textAlign(TextAlign.Center)// 文本居中        .width('180lpx') // 设置宽度    }    .height('100%') // 设置高度    .backgroundColor(Color.Red) // 设置背景颜色    .justifyContent(FlexAlign.SpaceEvenly) // 设置内容均匀分布    .borderRadius({ topRight: 10, bottomRight: 10 }) // 设置圆角    .onClick(() => { // 点击事件      this.counters.splice(index, 1) // 从数组中删除计数器      this.listScroller.closeAllSwipeActions() // 关闭所有滑动操作      promptAction.showToast({        // 显示删除成功的提示        message: '删除成功',        duration: 2000,        bottom: '400lpx'      });    })  }
  aboutToAppear(): void { // 组件即将出现时调用    const options: preferences.Options = { name: Index.counterStorageKey }; // 获取偏好设置选项    this.dataPreferences = preferences.getPreferencesSync(getContext(), options); // 同步获取偏好设置    const savedData: string = this.dataPreferences.getSync(Index.counterStorageKey, "[]") as string // 获取保存的数据    const parsedData: Array<CounterItem> = JSON.parse(savedData) as Array<CounterItem> // 解析数据    console.info(`parsedData:${JSON.stringify(parsedData)}`) // 打印解析后的数据    for (const item of parsedData) { // 遍历解析后的数据      const newItem = new CounterItem(item.name) // 创建新的计数器实例      newItem.count = item.count // 设置计数器的count      newItem.upStep = item.upStep // 设置计数器的upStep      newItem.downStep = item.downStep // 设置计数器的downStep      this.counters.push(newItem) // 将新计数器添加到数组    }    this.updateTotalCount() // 更新总计数  }
  build() { // 构建组件的UI    Column() {      Text('计数器')// 显示标题        .width('100%')// 设置宽度        .height('88lpx')// 设置高度        .fontSize('38lpx')// 设置字体大小        .backgroundColor(Color.White)// 设置背景颜色        .textAlign(TextAlign.Center) // 文本居中      Column() {        List({ space: this.listSpacing, scroller: this.listScroller }) { // 创建列表          ForEach(this.counters, (counter: CounterItem, index: number) => { // 遍历计数器数组            ListItem() { // 列表项              Row() { // 行布局                Stack() { // 堆叠布局                  Rect().fill("#65DACC").width(`${this.baseFontSize / 2}lpx`).height('4lpx') // 上方横条                  Circle()// 圆形按钮                    .width(`${this.baseFontSize}lpx`)                    .height(`${this.baseFontSize}lpx`)                    .fillOpacity(0)// 透明填充                    .borderWidth('4lpx')// 边框宽度                    .borderRadius('50%')// 圆角                    .borderColor("#65DACC") // 边框颜色                }                .width(`${this.baseFontSize * 2}lpx`) // 设置宽度                .height(`100%`) // 设置高度                .clickEffect({ scale: 0.6, level: ClickEffectLevel.LIGHT }) // 点击效果                .onClick(() => { // 点击事件                  counter.count -= counter.downStep // 减少计数器的count                  this.updateTotalCount() // 更新总计数                })
                Stack() { // 堆叠布局                  Text(counter.name)// 显示计数器名称                    .fontSize(`${this.baseFontSize / 2}lpx`)// 设置字体大小                    .fontColor(Color.Gray)// 设置字体颜色                    .margin({ bottom: `${this.baseFontSize * 2}lpx` }) // 设置底部边距                  Text(`${counter.count}`)// 显示计数器当前值                    .fontColor(Color.Black)// 设置字体颜色                    .fontSize(`${this.baseFontSize}lpx`) // 设置字体大小                }.height('100%') // 设置高度                Stack() { // 堆叠布局                  Rect().fill("#65DACC").width(`${this.baseFontSize / 2}lpx`).height('4lpx') // 下方横条                  Rect()                    .fill("#65DACC")                    .width(`${this.baseFontSize / 2}lpx`)                    .height('4lpx')                    .rotate({ angle: 90 }) // 垂直横条                  Circle()// 圆形按钮                    .width(`${this.baseFontSize}lpx`)// 设置宽度                    .height(`${this.baseFontSize}lpx`)// 设置高度                    .fillOpacity(0)// 透明填充                    .borderWidth('4lpx')// 边框宽度                    .borderRadius('50%')// 圆角                    .borderColor("#65DACC") // 边框颜色                }                .width(`${this.baseFontSize * 2}lpx`) // 设置堆叠布局宽度                .height(`100%`) // 设置堆叠布局高度                .clickEffect({ scale: 0.6, level: ClickEffectLevel.LIGHT }) // 点击效果                .onClick(() => { // 点击事件                  counter.count += counter.upStep // 增加计数器的count                  this.updateTotalCount() // 更新总计数                })              }              .width('100%') // 设置列表项宽度              .backgroundColor(Color.White) // 设置背景颜色              .justifyContent(FlexAlign.SpaceBetween) // 设置内容两端对齐              .padding({ left: '30lpx', right: '30lpx' }) // 设置左右内边距            }            .height(this.listItemHeight) // 设置列表项高度            .width('100%') // 设置列表项宽度            .margin({              // 设置列表项的外边距              top: index == 0 ? this.listSpacing : 0, // 如果是第一个项，设置上边距              bottom: index == this.counters.length - 1 ? this.listSpacing : 0 // 如果是最后一个项，设置下边距            })            .borderRadius(10) // 设置圆角            .clip(true) // 裁剪超出部分            .swipeAction({ start: this.itemStart(index), end: this.itemEnd(index) }) // 设置滑动操作            .scale(counter.scale) // 设置计数器缩放比例            .onClick(() => { // 点击事件              this.selectedIndex = index // 设置当前选中的计数器索引              this.isSheetVisible = true // 显示底部弹出表单            })
          }, (counter: CounterItem) => counter.id.toString())// 使用计数器ID作为唯一键            .onMove((from: number, to: number) => { // 列表项移动事件              const tmp = this.counters.splice(from, 1); // 从原位置移除计数器              this.counters.splice(to, 0, tmp[0]) // 插入到新位置            })
        }        .scrollBar(BarState.Off) // 隐藏滚动条        .width('648lpx') // 设置列表宽度        .height('100%') // 设置列表高度      }      .width('100%') // 设置列宽度      .layoutWeight(1) // 设置布局权重
      Row() { // 底部合计行        Column() { // 列布局          Text('合计').fontSize('26lpx').fontColor(Color.Gray) // 显示“合计”文本          Text(`${this.totalCount}`).fontSize('38lpx').fontColor(Color.Black) // 显示总计数        }.margin({ left: '50lpx' }) // 设置左边距        .justifyContent(FlexAlign.Start) // 设置内容左对齐        .alignItems(HorizontalAlign.Start) // 设置项目左对齐        .width('300lpx') // 设置列宽度
        Row() { // 添加按钮行          Text('添加').fontColor(Color.White).fontSize('28lpx') // 显示“添加”文本        }        .onClick(() => { // 点击事件          this.counters.unshift(new CounterItem(`新计数项${Index.counterId}`)) // 添加新计数器          this.listScroller.scrollTo({ xOffset: 0, yOffset: 0 }) // 滚动到顶部          this.counters[0].scale = { x: 0.8, y: 0.8 }; // 设置新计数器缩放          animateTo({            // 动画效果            duration: 1000, // 动画持续时间            curve: curves.springCurve(0, 10, 80, 10), // 动画曲线            iterations: 1, // 动画迭代次数            onFinish: () => { // 动画完成后的回调            }          }, () => {            this.counters[0].scale = { x: 1, y: 1 }; // 恢复缩放          })        })
        .width('316lpx') // 设置按钮宽度        .height('88lpx') // 设置按钮高度        .backgroundColor("#65DACC") // 设置按钮背景颜色        .borderRadius(10) // 设置按钮圆角        .justifyContent(FlexAlign.Center) // 设置内容居中      }.width('100%').height('192lpx').backgroundColor(Color.White) // 设置行宽度和高度
    }    .backgroundColor("#f2f2f7") // 设置背景颜色    .width('100%') // 设置宽度    .height('100%') // 设置高度    .bindSheet(this.isSheetVisible, this.mySheet(), {      // 绑定底部弹出表单      height: 300, // 设置表单高度      dragBar: false, // 禁用拖动条      onDisappear: () => { // 表单消失时的回调        this.isSheetVisible = false // 隐藏表单      }    })  }
  @Builder  // 构建器装饰器  mySheet() { // 创建底部弹出表单    Column({ space: 20 }) { // 列布局，设置间距      Row() { // 行布局        Text('计数标题：') // 显示“计数标题”文本        TextInput({ text: this.counters[this.selectedIndex].name }).width('300lpx').onChange((value) => { // 输入框，绑定计数器名称          this.counters[this.selectedIndex].name = value // 更新计数器名称        })
      }
      Row() { // 行布局        Text('增加步长：') // 显示“增加步长”文本        TextInput({ text: `${this.counters[this.selectedIndex].upStep}` })// 输入框，绑定增加步长          .width('300lpx')// 设置输入框宽度          .type(InputType.Number)// 设置输入框类型为数字          .onChange((value) => { // 输入框变化事件            this.counters[this.selectedIndex].upStep = parseInt(value) // 更新增加步长            this.updateTotalCount() // 更新总计数          })
      }
      Row() { // 行布局        Text('减少步长：') // 显示“减少步长”文本        TextInput({ text: `${this.counters[this.selectedIndex].downStep}` })// 输入框，绑定减少步长          .width('300lpx')// 设置输入框宽度          .type(InputType.Number)// 设置输入框类型为数字          .onChange((value) => { // 输入框变化事件            this.counters[this.selectedIndex].downStep = parseInt(value) // 更新减少步长            this.updateTotalCount() // 更新总计数          })
      }    }    .justifyContent(FlexAlign.Start) // 设置内容左对齐    .padding(40) // 设置内边距    .width('100%') // 设置宽度    .height('100%') // 设置高度    .backgroundColor(Color.White) // 设置背景颜色  }}