《鸿蒙纪元》 是 张风捷特烈 计划打造的一套 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 脑图电子版,让我们一起成长,变得更强。我们下次再见~