鸿蒙NEXT开发【电子木鱼】 实战案例

前言

正所谓：Hello Word 是程序员学任何一门语言的第一个程序实践。这其实也是一个不错的正反馈，那如何让学习鸿蒙 Next 更有成就感呢？下面就演示一下从零开发一个鸿蒙 Next 版的电子木鱼，主打就是一个抽象！

实现要点

1. 页面布局
2. 木鱼点击
3. 木鱼音效
4. 动画特效
5. 自定义弹窗

开始实践

页面布局

ArkTS 定义了声明式 UI 描述、自定义组件和动态扩展 UI 元素的能力，配合 ArkUI 开发框架中的系统组件及其相关的事件方法、属性方法等共同构成 UI 开发的主体。我们下面要完成的主要是一个木鱼和设置按钮、自动按钮。

build() {

Column() {
  HdNav({ title: '电子木鱼', showRightIcon: false, iconColor: $r('app.color.white'), titleColor: '#ffffff' })

  Row() {
	Text(this.woodenType[this.type] + '：'+ this.score).fontSize(22).fontColor("#ffffff").width('100%').textAlign(TextAlign.Center)
  }.width("100%").height("8%")

  Row() {
	Image($r('app.media.setting')).width(25).height(25).margin(16).onClick(() => {
	  if (this.dialogController != null) {
		this.dialogController.open()
	  }
	})
  }.width('100%')

  Row() {
	Image($r('app.media.foreground')).width(40).height(40).margin({left:8,top:5})
  }.width('100%')
  .onClick(() => {
	this.handlePopup = !this.handlePopup
  })
  .bindPopup(this.handlePopup, {
	message: '数据统计功能，正在完善中~',
  })

  Row() {
	if (this.isPresent) {
	  Text(this.woodenType[this.type] + ': ' + this.woodenFish