鸿蒙NEXT开发案例：计数器

【引言】（完整代码在最后面）

本文将通过一个简单的计数器应用案例，介绍如何利用鸿蒙NEXT的特性开发高效、美观的应用程序。我们将涵盖计数器的基本功能实现、用户界面设计、数据持久化及动画效果的添加。

【环境准备】

电脑系统：windows 10

开发工具：DevEco Studio 5.0.1 Beta3 Build Version: 5.0.5.200

工程版本：API 13

真机：Mate60 Pro

语言：ArkTS、ArkUI

【项目概述】

本项目旨在创建一个多计数器应用，用户可以自由地添加、编辑、重置和删除计数器。每个计数器具有独立的名称、当前值、增加步长和减少步长。应用还包括总计数的显示，以便用户快速了解所有计数器的总和。

【功能实现】

1、计数器模型

首先，我们定义了一个CounterItem类来表示单个计数器，其中包含了计数器的基本属性和行为。

@ObservedV2
class 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;
  }
}

2、应用入口与状态管理

应用的主入口组件Index负责管理计数器列表、总计数、以及UI的状态。这里使用了@State和@Watch装饰器来监控状态的变化。

@Entry
@Component
struct 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;
 
  // ...其他方法
}

3、数据持久化

为了保证数据在应用重启后仍然可用，我们使用了preferences模块来同步地读取和写入数据。

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();
}

4、用户界面

用户界面的设计采用了现代简洁的风格，主要由顶部的总计数显示区、中间的计数器列表区和底部的操作按钮组成。列表项支持左右滑动以显示重置和删除按钮。

@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;
    this.updateTotalCount();
    this.listScroller.closeAllSwipeActions();
  });
}

5、动画效果

当用户添加新的计数器时，通过动画效果让新计数器逐渐放大至正常尺寸，提升用户体验。

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 };
});

【总结】

通过上述步骤，我们成功地构建了一个具备基本功能的计数器应用。在这个过程中，我们不仅学习了如何使用鸿蒙NEXT提供的各种API，还掌握了如何结合动画、数据持久化等技术点来优化用户体验。希望本文能为你的鸿蒙开发之旅提供一些帮助和灵感！

【完整代码】

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

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) // 设置背景颜色
  }
}