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