个人主页→VON
收录专栏→鸿蒙开发小型案例总结
基础语法部分会发布于github 和 gitee上面(暂未发布)
前言
本案例主要运用了交互点击事件和基础的算术运算符的应用,难度并不大,卡片的制作相对来说并不是太难,简单的整体到局部。
知识点概述
在鸿蒙开发中,交互点击事件是构建用户界面交互性的重要组成部分。这些事件允许应用对用户的输入做出响应,比如点击、长按或拖动手势等。
触屏事件
- 点击事件:当手指或手写笔在组件上完成一次完整的按下和抬起动作时,会触发点击事件。这种事件通常用于按钮、图片或其他可交互元素的简单交互,如执行命令或切换状态。
- 拖拽事件:当用户长按一个组件并拖拽到另一个位置或组件上时,会触发拖拽事件。这种事件常用于重新排序列表项或在画板上移动元素等场景。
- 触摸事件:触摸事件涵盖了从屏幕接触到离开的所有动作,包括点击、滑动、长按等。每种子事件都有对应的处理函数,使得开发者能够精确地控制应用的响应行为。
键鼠事件
- 鼠标事件:在支持鼠标或触控板的设备上,鼠标的点击、滚轮滚动、双击等动作都会触发相应的鼠标事件。这些事件可以用于实现更为复杂的指针交互逻辑,如右键菜单或拖拽操作。
- 键盘事件:键盘事件的处理使得应用能响应物理键盘或屏幕上虚拟键盘的敲击。这包括了按键按下和释放的事件捕捉,对于需要文本输入的场景尤为重要。
焦点事件
- 获取和失去焦点:当用户通过鼠标点击、键盘Tab键或触摸屏操作改变界面活动元素时,会触发焦点事件。这对于提升那些使用键盘导航的用户的用户体验至关重要。
手势事件
- 单一与组合手势:鸿蒙系统支持单一手势(如单击、轻触)和由多个单一手势组成的复杂手势(如缩放、旋转)。开发者可以为组件绑定特定的手势识别及响应方法。
手势识别
- 点击手势:TapGesture用于识别单一的轻触动作,可以设定点击次数和手指数量。例如,可以设置双击手势来执行特定操作。
- 长按手势:LongPressGesture用于识别长按动作,可以设置触发长按所需的最短时间和是否连续触发事件回调。
- 拖动手势:PanGesture用于识别拖动操作,可以定义拖动的方向和距离阈值,以便于实现页面滑动或图像拖动等功能。
界面效果展示
点赞前
点赞后
代码展示
@Entry
@Component
struct Index {
// 声明状态
@State color:string='#fff'
@State count:number=2998
build() {
Column() {
Column(){
Image($r('app.media.xhs_img_03'))
.width(200)
.borderRadius(10)
Text('反emo文学,太搞笑了')
.fontSize(13)
.fontColor(Color.White)
.width('100%')
.fontWeight(500)
.margin({left:20,top:10,bottom:10})
}
Row() {
Row() {
Image($r('app.media.tx_01'))
.width(20)
.borderRadius(10)
.margin({right:5})
Text('金金妈妈')
.fontColor(Color.White)
.fontSize(12)
}
Row() {
Image($r('app.media.ic_love'))
.width(14)
.margin({right:2})
.fillColor(this.color)
Text(this.count.toString())
.fontSize(12)
.fontColor(this.color)
}
.onClick(()=>{
// 修改数字
this.count+=1
// 修改颜色
this.color='#ff0000'
})
}
.width('100%')
.padding({left:10,right:10})
.justifyContent(FlexAlign.SpaceBetween)
}
.width(220)
.height(500)
.margin(20)
.padding(10)
.backgroundColor(Color.Black)
}
}