鸿蒙纪·梦始卷#07 | 电子木鱼 - 需求和静态界面《鸿蒙纪元》是张风捷特烈计划打造的一套 HarmonyOS

鸿蒙纪07.png

《鸿蒙纪元》 是张风捷特烈计划打造的一套 HarmonyOS 开发系列教程合集。致力于创作优质的鸿蒙原生学习资源，帮助开发者进入纯血鸿蒙的开发之中。本系列的所有代码将开源在 HarmonyUnit 项目中:

github: github.com/toly1994328…
gitee: gitee.com/toly1994328…

鸿蒙纪元 系列文章列表可在《文章总集》或【github 项目首页】查看。

上一篇，我们简单了解了一下形状组件、以及属性动画的使用。并且在前面三篇实现了 猜数字 的小功能，我们已经初步踏入鸿蒙开发的门槛。知道该在哪里写代码来控制界面上的视图表现，以及交互过程中通过修改 状态数据 来更新界面内容。

接下来我们将进入新的篇章，实现一个有趣的 电子木鱼 。首先在 pages 中增加一个 muyu 文件夹，盛放该功能的相关代码：

1. 界面交互介绍

电子木鱼是本教程的第二个案例，相比于猜数字项目，功能需求比较复杂一点，适合新手朋友进一步了解鸿蒙开发的相关知识。下面是两个最基础的交互：

点击木鱼图片发出敲击声，并增加功德，展示增加动画。
点击标题栏右侧按钮，近进入功德记录页面。

点击木鱼	查看功德记录

光是点击图片发出音效未免有些单调，这里提供了两个选择功能，让应用的表现更丰富一些。

点击右上角按钮，选择木鱼音效
点击右上角按钮，选择木鱼样式

切换音效	切换样式

2. 开始搭建静态界面

本文的目标是分析界面的结构、搭建静态界面，具体的交互逻辑将在下一篇实现。首先来简单分析一下界面的布局思路，下图是第一步的效果和着色后的区域划分：

整体来看，是一个上中下的结果，可以使用 Column 布局竖直排列。
顶部可以使用之前封装的 AppBar 组件展示
中间两块内容平分区域，可以使用 layoutWeight(1), 并且区域内容居中。

界面	着色示意

在 MuYuPage 中使用 AppBar 组件构建头部内容：在构建过程中，处理自定义组件外，还可以通过 @Builder 来拆分构建逻辑。大家可以根据构建逻辑的 复杂性 和 可复用性 来综合考虑拆分的方式：

import { AppBar } from '../../../components/AppBar'

@Component
export struct MuYuPage {
  @Builder
  title() {
    Text("电子木鱼").fontSize('18fp').fontWeight(FontWeight.Bold).margin({ left: 12 })
  }

  @Builder
  tailing() {
    Button() {
      Image($r('app.media.history')).width(26).height(26).fillColor(Color.Black)
    }
    .width(36).height(36)
    .backgroundColor(Color.Transparent)
    .onClick(() => this.toHistory())
  }

  toHistory(): void { }

  build() {
    Column() {
      AppBar({ titleSlot: this.title, tailing: (): void => this.tailing() }
      ).backgroundColor($r('sys.color.white'))
      this.valueDisplay()
      this.muyuDisplay()
    }.backgroundColor('#fafafa')
  }
  
  @Builder
  valueDisplay(){}

  @Builder
  muyuDisplay(){}
}

这样两个区域的构建逻辑就可以分离出来，上下分别通过 valueDisplay 和 muyuDisplay 函数进行处理：

@Builder
valueDisplay(){
  Column() {
    Text('功德数: 0').fontSize('24fp').fontWeight(FontWeight.Bold)
  }
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .layoutWeight(1)
  .width('100%')
}

@Builder
muyuDisplay(){
  Column() {
    Image($r('app.media.muyu')).width(200)
  }
  .width('100%')
  .alignItems(HorizontalAlign.Center)
  .justifyContent(FlexAlign.Center)
  .layoutWeight(1)
}

提交一个小里程碑：v11-电子木鱼-简单静态界面。

3. 叠放 Stack 与定位 position

界面左上角有两个按钮，用于后面切换图片和音效，每次点击时，界面上会动态展示 功德数+1 的字样。这两者都将通过 Stack 进行叠放在区域上方：

按钮	功德数+1

两个按钮放在 valueDisplay 函数中，由 buildButtons 构建函数处理：

@Builder
valueDisplay(){
  Stack(){
    Column() {
      Text('功德数: 0').fontSize('24fp').fontWeight(FontWeight.Bold)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    this.buildButtons()
  }
  .layoutWeight(1).width('100%')
}

圆角按钮通过 Button 组件构建，将 type 置为 ButtonType.Normal ；通过 borderRadius 即可设置圆角半径。绝对位置定位可以使用通用的 position 方法，支持传入左上右下的定位，比如这里定位到上方和右侧：

@Builder
buildButtons(){
  Column() {
    Button({ type: ButtonType.Normal, stateEffect: true }) {
      SymbolGlyph($r('sys.symbol.music_fill'))
        .fontSize(20)
        .fontColor([Color.White])
        .fontWeight(FontWeight.Bold)
    }.margin({ bottom: 12 }).width(36).height(36).borderRadius(4)
    
    Button({ type: ButtonType.Normal, stateEffect: true }) {
      SymbolGlyph($r('sys.symbol.picture_fill'))
        .fontSize(20)
        .fontColor([Color.White])
        .fontWeight(FontWeight.Bold)
    }.width(36).height(36).borderRadius(4)
  }.position({
    top: 12,
    right: 12
  })
}

功德数+1 的文字，也可以通过叠放处理，这里使用 translate 进行偏移；后面需要在点击时对文章进行平移和透明度动画。

@Builder
muyuDisplay(){
  Stack(){
    Column() {
      Image($r('app.media.muyu')).width(200)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    Text('功德 +1').translate({ y: -80 })
  }
  .width('100%')
  .layoutWeight(1)
}

尾声

到这里，电子木鱼的静态界面就基本完成了，提交一个小里程碑：v12-电子木鱼的静态界面。下一篇将带来电子木鱼的具体功能实现。
更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站。关注 公众号 并回复 鸿蒙纪元 可领取最新的 xmind 脑图电子版，让我们一起成长，变得更强。我们下次再见~

鸿蒙纪元 QQ交流群： 727300436
掘金账号：张风捷特烈
bilibli 账号：张风捷特烈
公众号：编程之王