鸿蒙5.0版开发：ArkTS组件通用属性（事件独占控制）

最新推荐文章于 2024-09-11 16:01:27 发布

星星不闪包退1

最新推荐文章于 2024-09-11 16:01:27 发布

阅读量416

点赞数 4

分类专栏：鸿蒙5.0 ArkUI ArkTS 文章标签： harmonyos 华为 android 鸿蒙 ArkTS 前端

本文链接：https://blog.csdn.net/m0_69424697/article/details/142060369

版权

鸿蒙5.0 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

ArkUI

19 篇文章 0 订阅

订阅专栏

ArkTS

15 篇文章 0 订阅

订阅专栏

往期鸿蒙全套实战文章必看：

事件独占控制

设置组件是否独占事件，事件范围包括组件自带的事件和开发者自定义的点击、触摸、手势事件。
在一个窗口内，设置了独占控制的组件上的事件如果首先响应，则本次交互只允许此组件上设置的事件响应，窗口内其他组件上的事件不会响应。

说明：

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

monopolizeEvents

monopolizeEvents(monopolize: boolean)

设置组件是否独占事件。

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
monopolize	boolean	是	设置组件是否独占事件。默认值：false 说明： 1、如果第一根手指触发了组件事件独占，在抬起前又按下了一根手指，则第二根手指的交互继续处于组件独占状态，依次类推。 2、如果开发者通过parallelGesture绑定了与子组件同时触发的手势，如PanGesture，子组件设置了独占控制且首个响应事件，则父组件的手势不会响应。

示例

// xxx.ets
@Entry
@Component
struct Index {
  @State message: string = 'set monopolizeEvents false'
  @State messageOut: string = ' '
  @State messageInner: string = ' '
  @State monopolize: boolean = false

  build() {
    Column() {
      Text(this.message)
        .fontSize(22)
        .margin(10)
      Text(this.messageOut)
        .fontSize(22)
        .margin(10)
      Text(this.messageInner)
        .fontSize(22)
        .margin(10)
      Button('clean')
        .fontSize(22)
        .margin(10)
        // 通过button的点击事件来切换内层column的独占控制属性
        .onClick(()=>{
          this.messageOut = " "
          this.messageInner = " "
        })
      Button('change monopolizeEvents')
        .fontSize(22)
        .margin(10)
        // 通过button的点击事件来切换内层column的独占控制属性
        .onClick(()=>{
          this.monopolize = !this.monopolize
          if (!this.monopolize) {
            this.message = "set monopolizeEvents false"
          } else {
            this.message = "set monopolizeEvents true"
          }
        })
      Column() {
        Column(){}
        // this.monopolize是true时，点击内层column只会触发自身的触摸事件，不会触发外层column的触摸事件
        // this.monopolize是false时，点击内层column会同时触发自身的触摸事件和外层column的触摸事件
        .monopolizeEvents(this.monopolize)
        .width('100%')
        .height('40%')
        .backgroundColor(Color.Blue)
        // 内层column绑定触摸事件
        .onTouch((event:TouchEvent)=>{
          if (event.type == TouchType.Down) {
            console.log("inner column touch down")
            this.messageInner = "inner column touch down"
          }
        })
      }
      .backgroundColor(Color.Gray)
      .height('100%')
      .width('100%')
      // 外层column绑定触摸事件
      .onTouch((event)=>{
        if (event.type == TouchType.Down) {
          console.log("outside column touch down")
          this.messageOut = "inner column touch down"
        }
      })
    }
    .height('100%')
  }
}