鸿蒙纪·梦始卷#07 | 电子木鱼 - 需求和静态界面

481 阅读3分钟

鸿蒙纪07.png

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

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

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


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

image.png

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

image.png


1. 界面交互介绍

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

  • 点击木鱼图片发出敲击声,并增加功德,展示增加动画。
  • 点击标题栏右侧按钮,近进入功德记录页面。
点击木鱼查看功德记录
130.gif133.gif

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

  • 点击右上角按钮,选择木鱼音效
  • 点击右上角按钮,选择木鱼样式
切换音效切换样式
131.gif132.gif

2. 开始搭建静态界面

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

  • 整体来看,是一个上中下的结果,可以使用 Column 布局竖直排列。
  • 顶部可以使用之前封装的 AppBar 组件展示
  • 中间两块内容平分区域,可以使用 layoutWeight(1), 并且区域内容居中。
界面着色示意
Screenshot_2024-11-01T091734.pngScreenshot_2024-11-01T094021.png

在 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(){}
}

这样两个区域的构建逻辑就可以分离出来,上下分别通过 valueDisplaymuyuDisplay 函数进行处理:

@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
Screenshot_2024-11-01T123903.pngScreenshot_2024-11-01T093650.png

两个按钮放在 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 方法,支持传入左上右下的定位,比如这里定位到上方和右侧:

image.png

@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 进行偏移;后面需要在点击时对文章进行平移和透明度动画。

image.png

@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 脑图电子版,让我们一起成长,变得更强。我们下次再见~