0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式开发:跨平台支持列表【组件标识】 通用属性

jf_46214456 ? 来源:jf_46214456 ? 作者:jf_46214456 ? 2024-06-06 15:51 ? 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

组件标识

id为组件的唯一标识,在整个应用内唯一。本模块提供组件标识相关接口,可以获取指定id组件的属性,也提供向指定id组件发送事件的功能。

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

属性

名称参数说明描述
idstring组件的唯一标识,唯一性由使用者保证。 默认值:'' 从API version 9开始,该接口支持在ArkTS卡片中使用。

接口

getInspectorByKey9+

getInspectorByKey(id: string): string

获取指定id的组件的所有属性,不包括子组件信息。

此接口仅用于对应用的测试。

参数:

参数类型必填描述
idstring要获取属性的组件id。

返回值:

类型描述
string组件属性列表的JSON字符串。

getInspectorTree9+

getInspectorTree(): Object

获取组件树及组件属性。

此接口仅用于对应用的测试。

返回值:

类型描述
Object组件树及组件属性列表的JSON对象。

sendEventByKey9+

sendEventByKey(id: string, action: number, params: string): boolean

给指定id的组件发送事件。

此接口仅用于对应用的测试。

参数:

参数类型必填描述
idstring要触发事件的组件的id。
actionnumber要触发的事件类型,目前支持取值: - 点击事件Click: 10 - 长按事件LongClick: 11。
paramsstring事件参数,无参数传空字符串 ""。

返回值:

类型描述
boolean找不到指定id的组件时返回false,其余情况返回true。

sendTouchEvent9+

sendTouchEvent(event: TouchObject): boolean

发送触摸事件。

此接口仅用于对应用的测试。

参数:

参数类型必填描述
event[TouchObject]触发触摸事件的位置,event参数见[TouchEvent]中TouchObject的介绍。

返回值:

类型描述
boolean事件发送失败时返回false,其余情况返回true。

sendKeyEvent9+

sendKeyEvent(event: KeyEvent): boolean

发送按键事件。

此接口仅用于对应用的测试。

参数:

参数类型必填描述
event[KeyEvent]按键事件,event参数见[KeyEvent]介绍。

返回值:

类型描述
boolean事件发送失败时时返回false,其余情况返回true。

sendMouseEvent9+

sendMouseEvent(event: MouseEvent): boolean

发送鼠标事件。

此接口仅用于对应用的测试。

参数:

参数类型必填描述
event[MouseEvent]鼠标事件,event参数见[MouseEvent]介绍。

返回值:

类型描述HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿
boolean事件发送失败时返回false,其余情况返回true。
新文档.png

示例

// xxx.ets
class Utils {
  static rect_left
  static rect_top
  static rect_right
  static rect_bottom
  static rect_value

  //获取组件所占矩形区域坐标
  static getComponentRect(key) {
    let strJson = getInspectorByKey(key)
    let obj = JSON.parse(strJson)
    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))
    let rectInfo = JSON.parse('[' + obj.$rect + ']')
    console.info("[getInspectorByKey] rectInfo is: " + rectInfo)
    this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
    this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
    this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
    this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
    return this.rect_value = {
      "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
    }
  }
}

@Entry
@Component
struct IdExample {
  @State text: string = ''

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

      Button() {
        Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold)
      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
      .onKeyEvent(() = > {
        this.text = "onKeyTab"
      })

      Button() {
        Text('click to start').fontSize(25).fontWeight(FontWeight.Bold)
      }.margin({ top: 20 })
      .onClick(() = > {
        console.info(getInspectorByKey("click"))
        console.info(JSON.stringify(getInspectorTree()))
        this.text = "Button 'click to start' is clicked"
        setTimeout(() = > {
          sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件
        }, 2000)
      }).id('click')

      Button() {
        Text('longClick').fontSize(25).fontWeight(FontWeight.Bold)
      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
      .gesture(
      LongPressGesture().onActionEnd(() = > {
        console.info('long clicked')
        this.text = "Button 'longClick' is longclicked"
        setTimeout(() = > {
          let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标
          let touchPoint: TouchObject = {
            id: 1,
            x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
            y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
            type: TouchType.Down,
            screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
            screenY: rect.left + (rect.right - rect.left) / 2, // 组件中心点y坐标
          }
          sendTouchEvent(touchPoint) // 发送触摸事件
          touchPoint.type = TouchType.Up
          sendTouchEvent(touchPoint) // 发送触摸事件
        }, 2000)
      })).id('longClick')

      Button() {
        Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold)
      }.type(ButtonType.Capsule).margin({ top: 20 })
      .onClick(() = > {
        console.info('onTouch is clicked')
        this.text = "Button 'onTouch' is clicked"
        setTimeout(() = > {
          let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标
          let mouseEvent: MouseEvent = {
            button: MouseButton.Left,
            action: MouseAction.Press,
            x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
            y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
            screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标
            screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标
            timestamp: 1,
            target: {
              area: {
                width: 1,
                height: 1,
                position: {
                  x: 1,
                  y: 1
                },
                globalPosition: {
                  x: 1,
                  y: 1
                }
              }
            },
            source: SourceType.Mouse,
            pressure: 1,
            tiltX: 1,
            tiltY: 1,
            sourceTool: SourceTool.Unknown
          }
          sendMouseEvent(mouseEvent) // 发送鼠标事件
        }, 2000)
      }).id('onTouch')

      Button() {
        Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold)
      }.margin({ top: 20 }).backgroundColor('#0D9FFB')
      .onMouse(() = > {
        console.info('onMouse')
        this.text = "Button 'onMouse' in onMouse"
        setTimeout(() = > {
          let keyEvent: KeyEvent = {
            type: KeyType.Down,
            keyCode: 2049,
            keyText: 'tab',
            keySource: 4,
            deviceId: 0,
            metaKey: 0,
            timestamp: 0
          }
          sendKeyEvent(keyEvent) // 发送按键事件
        }, 2000)
      }).id('onMouse')

      Text(this.text).fontSize(25).padding(15)
    }
    .width('100%').height('100%')
  }
}

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    533

    浏览量

    18512
  • 鸿蒙
    +关注

    关注

    60

    文章

    2656

    浏览量

    44343
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解

    【 HarmonyOS 5 入门系列 】鸿蒙HarmonyOS示例项目讲解 ##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 (金融理财# 一、前言:移动
    的头像 发表于 07-07 11:57 ?216次阅读
    【 HarmonyOS 5 入门系列 】<b class='flag-5'>鸿蒙</b>HarmonyOS示例项目讲解

    鸿蒙ArkTS+ArkUI仿微信消息列表页制作

    \' }) 这里使用了justifyContent属性来进行居中,如果不加这个属性的话,那么100%宽度的row会让文字靠左显示。接下来是显示聊天数据的列表,这里采用ForEach列表
    发表于 06-30 18:28

    UI开发概述

    基于ArkTS声明开发范式的方舟开发框架是一套开发极简、高性能、
    发表于 06-24 06:36

    什么是ArkTS

    ArkTS简介 ArkTS是OpenHarmony优选的应用高级开发语言。ArkTS提供了声明
    发表于 06-17 06:24

    ArkUI-X平台应用改造指南

    Android/iOS与HarmonyOS Next上能够拥有相同的展示效果和交互体验。 1.开发者进行设计时需首先考虑ArkUI-X框架的实际适配状况,使用支持平台的UI控件、
    发表于 06-16 23:05

    鸿蒙5开发宝藏案例分享---应用并发设计

    ?** 鸿蒙并发编程实战指南:解锁ArkTS多线程黑科技** 嘿,开发者朋友们! 今天给大家扒一扒鸿蒙官方文档里藏着的并发编程宝藏—— 100+实战场景解决方案 !从金融理财到游戏
    发表于 06-12 16:19

    使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件

    的一站集成开发环境(IDE),专为鸿蒙操作系统(HarmonyOS Next)应用和服务开发设计 DevEco Studio,掌握基本操作和开发
    发表于 06-11 17:18

    ArkUI-x平台Bridge最佳实践

    ;一码三平台\" 前面讲到的bridge主要是解决开发者在进行ArkTS代码开发时,需要使用的鸿蒙API不
    发表于 06-10 23:06

    Kuikly鸿蒙版正式开源 —— 揭秘卓越性能适配之旅

    端的基础能力和设施,包括丰富的组件,完善的调试、构建、发布、监控配套工具链,稳定性监控能力等。 Kuikly框架优势: 一码五端,支持Android、iOS、鸿蒙、Web、小程序5
    发表于 06-04 16:46

    ArkUI-X平台框架接入指南

    ArkUI平台框架(ArkUI-X)进一步将ArkUI开发框架扩展到了多个OS平台:目前支持OpenHarmony、Android、 iO
    发表于 05-18 18:21

    KaihongOS操作系统:ArkTS语言基础

    ArkTS语言基础 KaihongOS是面向全场景的万物智联技术底座,在OpenHarmony基础上技术创新和系统能力增强的设备的操作系统,它支持多种设备类型。ArkTS是Kaih
    发表于 04-23 06:31

    开源啦!!!基于鸿蒙ArkTS封装的图表组件《McCharts》,大家快来一起共创

    的地方请大家高抬贵手,宽容一下,谢谢。 这次主要是给大家带来一个重磅消息,就是我自己使用鸿蒙ArkTS语法开发的图表组件今日正式开源了。为什么?原因有两点吧!
    发表于 03-15 15:21

    ArkTS开发指南优化上新

    ArkTS是HarmonyOS应用开发的官方高级语言,提供了声明UI范式、状态管理、渲染控制等相应能力,让开发者能够以更简洁、更自然的方式
    的头像 发表于 11-20 14:14 ?1723次阅读
    <b class='flag-5'>ArkTS</b><b class='flag-5'>开发</b>指南优化上新

    鸿蒙端实践-JS虚拟机架构实现

    类似的框架,我们需要自行实现以确保核心基础能力的完整。 鸿蒙虚拟机的开发经历了从最初 ArkTs2V8 到 JSVM + Roma新架构方案 。在此过程中,我们实现了完整的鸿蒙版的“J
    的头像 发表于 09-30 14:42 ?3113次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>跨</b>端实践-JS虚拟机架构实现

    HarmonyOS Next原生应用开发-从TS到ArkTS的适配规则(十四)

    语句表示执行顺序,而非逗号运算符 let x = 0; ++x; x = x++; 不支持解构变量声明 规则:arkts-no-destruct-decls 级别:错误 ArkTS
    发表于 08-16 10:20