鸿蒙开发-UI-交互事件-键鼠事件

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

鸿蒙开发-UI-图形-组件内转场动画

鸿蒙开发-UI-图形-弹簧曲线动画

鸿蒙开发-UI-交互事件-通用事件

文章目录

前言

 一、鼠标事件

1.鼠标事件触发回调

2.鼠标事件数据流

3.鼠标事件处理逻辑

4.onHover示例

5.onMouse示例

6.hoverEffect示例

二、按键事件

2.按键事件回调函数

3. 代码示例

总结

---

前言

上文学习了鸿蒙开发UI交互事件的类型，详细学习了通用事件的触屏事件，本文将学习通用事件中的键鼠事件和焦点事件。

---

 一、鼠标事件

1.鼠标事件触发回调

名称	描述
onHover(event: (isHover: boolean) => void)	鼠标悬浮事件回调：鼠标进入或退出组件时触发该回调。 isHover：表示鼠标是否悬浮在组件上，鼠标进入时为true, 退出时为false。
onMouse(event: (event?: MouseEvent) => void)	当前组件被鼠标按键点击时或者鼠标在组件上悬浮移动时，触发该回调 MouseEvent：表示触发此次的鼠标事件，该事件支持自定义冒泡设置，默认父子冒泡。常见用于开发者自定义的鼠标行为逻辑处理，该事件对象的返回值包含触发事件时的时间戳、鼠标按键、动作、鼠标位置在整个屏幕上的坐标和相对于当前组件的坐标。

2.鼠标事件数据流

3.鼠标事件处理逻辑

注：所有单指可响应的触摸事件/手势事件，均可通过鼠标左键来操作和响应

4.onHover示例

@Entry
@Component
struct MouseExample {
// step1：定义状态变量isHovered，用于保存鼠标在组件行为的状态值
  @State isHovered: boolean = false;

  build() {
    Column() {
// step2：定义监听鼠标行为绑定的组件button，根据鼠标在组件行为的状态值动态改变button值
      Button(this.isHovered ? 'Hovered!' : 'Not Hover')
        .width(200).height(100)
        .backgroundColor(this.isHovered ? Color.Green : Color.Gray)
// step3：使用onHover接口监听鼠标是否悬浮在Button组件上
        .onHover((isHover: boolean) => { 
          this.isHovered = isHover;