【HarmonyOS NEXT星河版开发学习】小型测试案例12-点赞案例

@VON

发布于 2025-12-21 11:23:49

840

前言

本案例主要运用了交互点击事件和基础的算术运算符的应用，难度并不大，卡片的制作相对来说并不是太难，简单的整体到局部。

知识点概述

在鸿蒙开发中，交互点击事件是构建用户界面交互性的重要组成部分。这些事件允许应用对用户的输入做出响应，比如点击、长按或拖动手势等。

触屏事件

点击事件：当手指或手写笔在组件上完成一次完整的按下和抬起动作时，会触发点击事件。这种事件通常用于按钮、图片或其他可交互元素的简单交互，如执行命令或切换状态。
拖拽事件：当用户长按一个组件并拖拽到另一个位置或组件上时，会触发拖拽事件。这种事件常用于重新排序列表项或在画板上移动元素等场景。
触摸事件：触摸事件涵盖了从屏幕接触到离开的所有动作，包括点击、滑动、长按等。每种子事件都有对应的处理函数，使得开发者能够精确地控制应用的响应行为。

键鼠事件

鼠标事件：在支持鼠标或触控板的设备上，鼠标的点击、滚轮滚动、双击等动作都会触发相应的鼠标事件。这些事件可以用于实现更为复杂的指针交互逻辑，如右键菜单或拖拽操作。
键盘事件：键盘事件的处理使得应用能响应物理键盘或屏幕上虚拟键盘的敲击。这包括了按键按下和释放的事件捕捉，对于需要文本输入的场景尤为重要。

焦点事件

获取和失去焦点：当用户通过鼠标点击、键盘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)
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除