鸿蒙HarmonyOS NEXT开发：组件标识（ArkTS通用属性）

最新推荐文章于 2024-08-22 20:39:25 发布
最新推荐文章于 2024-08-22 20:39:25 发布
阅读量683 收藏 11
点赞数 15
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 鸿蒙 android 驱动开发 嵌入式硬件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141064952
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

组件标识

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

说明：

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

属性

id

id(value: string): T

组件的唯一标识，唯一性由使用者保证。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

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

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

参数：

名称类型必填说明
valuestring是组件的唯一标识，唯一性由使用者保证。
默认值：‘’

key12+

key(value: string): T

组件的唯一标识，唯一性由使用者保证。

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

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

参数：

名称类型必填说明
valuestring是组件的唯一标识，唯一性由使用者保证。
默认值：‘’

接口

getInspectorByKey9+

getInspectorByKey(id: string): string

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

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

参数:

参数名类型必填说明
idstring是要获取属性的组件id。

返回值:

类型说明
string组件属性列表的JSON字符串。
说明：
字符串信息包含组件的tag、id、位置信息(相对于窗口左上角的坐标)以及用于测试检查的组件所包含的相关属性信息。

getInspectorTree9+

getInspectorTree(): Object

获取组件树及组件属性。

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

返回值:

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

sendEventByKey9+

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

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

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

参数:

参数名类型必填说明
idstring是要触发事件的组件的id。
actionnumber是要触发的事件类型，目前支持取值：
- 点击事件Click: 10
- 长按事件LongClick: 11。
paramsstring是事件参数，无参数传空字符串 “”。

返回值:

类型说明
boolean找不到指定id的组件时返回false，其余情况返回true。

sendTouchEvent9+

sendTouchEvent(event: TouchObject): boolean

发送触摸事件。

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

参数:

参数名类型必填说明
eventTouchObject是触发触摸事件的位置，event参数见TouchEvent中TouchObject的介绍。

返回值:

类型说明
boolean事件发送失败时返回false，其余情况返回true。

sendKeyEvent9+

sendKeyEvent(event: KeyEvent): boolean

发送按键事件。

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

参数:

参数名类型必填说明
eventKeyEvent是按键事件，event参数见KeyEvent介绍。

返回值:

类型说明
boolean事件发送失败时时返回false，其余情况返回true。

sendMouseEvent9+

sendMouseEvent(event: MouseEvent): boolean

发送鼠标事件。

此接口仅用于对应用的测试。由于耗时长，不建议使用。

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

参数：

参数名类型必填说明
eventMouseEvent是鼠标事件，event参数见MouseEvent介绍。

返回值：

类型说明
boolean事件发送失败时返回false，其余情况返回true。

示例

// xxx.ets
import { IntentionCode } from '@ohos.multimodalInput.intentionCode'

class Utils {
  static rect_left: number
  static rect_top: number
  static rect_right: number
  static rect_bottom: number
  static rect_value: Record<string, number>

  //获取组件所占矩形区域坐标
  static getComponentRect(key:string):Record<string, number> {
    let strJson = getInspectorByKey(key)
    let obj:Record<string, string> = JSON.parse(strJson)
    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj))
    let rectInfo:string[] = JSON.parse('[' + obj.$rect + ']')
    console.info("[getInspectorByKey] rectInfo is: " + rectInfo)
    Utils.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
    Utils.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
    Utils.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
    Utils.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
    return Utils.rect_value = {
      "left": Utils.rect_left, "top": Utils.rect_top, "right": Utils.rect_right, "bottom": Utils.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,
            type: TouchType.Down,
            x: rect.left + (rect.right - rect.left) / 2, // 相对于组件左上角的水平方向坐标
            y: rect.top + (rect.bottom - rect.top) / 2, // 相对于组件左上角的垂直方向坐标
            screenX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标，API10已废弃，采用windowX替代
            screenY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标，API10已废弃，采用windowY替代
            windowX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标
            windowY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标
            displayX: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的水平方向坐标
            displayY: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的垂直方向坐标
          }
          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, // 相对于组件左上角的水平方向坐标
            y: rect.top + (rect.bottom - rect.top) / 2, // 相对于组件左上角的垂直方向坐标
            screenX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标，API10已废弃，采用windowX替代
            screenY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标，API10已废弃，采用windowY替代
            windowX: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的水平方向坐标
            windowY: rect.left + (rect.right - rect.left) / 2, // 相对于应用窗口左上角的垂直方向坐标
            displayX: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的水平方向坐标
            displayY: rect.left + (rect.right - rect.left) / 2, // 相对于设备屏幕左上角的垂直方向坐标
            stopPropagation: () => {
            },
            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,
            stopPropagation: () => {
            },
            intentionCode: IntentionCode.INTENTION_DOWN
          }
          sendKeyEvent(keyEvent) // 发送按键事件
        }, 2000)
      }).id('onMouse')

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

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
HarmonyOS从基础到实战-高性能华为在线答题元服务
一键难忘的博客
11-21 12万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
HarmonyOS开发详解（四）——鸿蒙Page Ability功能及UI界面开发详解_鸿蒙ui封装和常量封装的区别
2401_84160087的博客
04-20 1257
核心属性有三个：alignment（对象方式，值如left、top等）、orientation（布局方向，值horizontal、vertical，水平或者垂直）、total_weight（权重）。注意：布局本身有一些属性，不同的布局会导致组件的属性不同，比如DependentLayout是依赖布局，会有一个left_of属性，表示在某个组件的左边，DependentLayout里面的button就会有一个left_of属性；2）组件宽、高设置，支持三种方式，一数值：10（像素）、10vp（屏幕像素）；
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：组件标识）
m0_64420071的博客
03-04 1459
ArkTS声明式开发（通用属性：组件标识）
HarmonyOS开发小记——获取组件坐标
javacapp的博客
01-25 896
鸿蒙ArkTs获取组件坐标，通过JSON.parse(getInspectorByKey("pos"))可以获取到一个JSON对象，我们再在这里面找我们需要的属性就行了。获取到的内容会是"xxvp"，只要把后面的字符"vp"去掉，剩下数值的转换成number，就可以用于运算之类的。通过getInspectorByKey("pos")，可以获取到组件"pos"所有的属性。Harmony里获取组建坐标用到的是组件标识里的getInspectorByKey()。
【愚公系列】2023年11月 HarmonyOS教学课程 003-ArkTS语言（状态管理）
热门推荐
时光隧道
11-29 6万+
状态管理是指在应用程序中维护和更新应用程序状态的过程。在一个程序中，可能有很多不同的组件和模块，它们需要共享和相互作用的状态。如果没有一个明确的方式来管理这些状态，就会导致代码混乱、不易维护和难以扩展。状态管理的目标是提供一种机制，使得所有的组件和模块都可以访问和更新同一个状态。这个状态通常是存储在一个中央存储区域中，被称为状态存储或状态容器。状态管理通常与应用程序的响应式设计紧密相连，以便在状态改变时自动更新应用程序的界面。在声明式UI编程框架中，应用程序的UI是由程序状态驱动的。
白嫖ChatGPT4
Web面试那些事儿的博客
12-07 830
提供了几本书籍，例如“命令行书籍”用于构建命令行应用程序，“WebAssembly书籍”用于使用Rust构建浏览器原生库，以及“嵌入式书籍”用于学习Rust在微控制器和其他嵌入式系统中的应用【33†来源】。这个汇编包含了17种不同的资源，被认为是学习Rust的好资源，Rust以其性能、类型安全和并发性而著称【32†来源】。然后，这个正好也是我们需要的东西，所以我就索性让它翻译成中文了，贴到下面了，大家可以自取。然后，又问了它的模型数据是啥时候的，它竟然返回的是今年4月份的数据。然后，它还可以处理本地附近。
鸿蒙HarmonyOS实战：JS组件通用方法规范总结
2401_84917132的博客
08-22 1055
当组件通过id属性标识后，可以使用该id获取组件对象并调用相关组件方法。
鸿蒙如何通过资源Id获取资源的方式(一)
shenfei平凡之路
07-14 1080
获取Element /** * get the Element * @param context 上下文 * @param resId the id * @return the Element */ public static Element getElement(Context context, int resId) { Element element = ElementScatter.getInstance(context).pa
鸿蒙获取组件的位置信息
liuhaikang的博客
03-17 1473
在鸿蒙应用开发中如何需要获取组件的位置信息
鸿蒙HarmonyOS开发框架—ArkTS语言（基本语法 二）_鸿蒙 struct
2401_84181193的博客
04-21 778
自定义组件通过“.”链式调用的形式设置通用样式。@Componentbuild() {Button(@Entry@Componentbuild() {Row() {说明 ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。
鸿蒙HarmonyOS开发框架—ArkTS语言（状态管理 四）_鸿蒙 arr t[] (1)
2301_82241698的博客
04-14 875
复制。
鸿蒙HarmonyOS学习手册_入门篇
特创数字
01-10 1901
应用软件所涉及的文件多种多样，开发者可通过HarmonyOS提供的集成开发工具将其开发的可执行代码、资源、三方库等文件整合到一起制作成HarmonyOS应用程序包，便于开发者对应用程序的部署。应用软件所涉及的设备类型多种多样，开发者可通过HarmonyOS提供的应用程序包配置文件指定其应用程序包的分发设备类型，便于应用市场对应用程序包的分发管理。
【HarmonyOS NEXT应用开发】案例19：基于List的滑动过程卡顿率问题分析&案例
xzs51job的专栏
08-13 44
如果应用侧没有丢帧且每帧耗时比较平均，则可以初步判断应用侧没有问题，同时也可以通过应用侧Trace中H:SendCommands下的H:MarshRSTransactionData cmdCount查看应用提交的绘制指令树是否过多。RS进程丢帧可能是应用进程导致的，如上图RS侧丢帧，可以看到RS侧丢帧原因是由于应用进程的帧耗时较长，提交较晚导致。所以这种情况只分析应用侧丢帧原因即可。如果应用进程中没有丢帧且每帧耗时比较均匀，但是RS侧发生丢帧，则说明不是应用侧导致丢帧，此时只分析RS进程丢帧原因即可。
HarmonyOS鸿蒙学习基础篇 - Text文本组件_鸿蒙text组件(1)
tencentes的博客
04-11 1082
从API version 9开始，该接口支持在ArkTS卡片中使用。
【HarmonyOS NEXT应用开发】案例25：基于List的滑动丢帧性能问题分析思路&案例
xzs51job的专栏
08-13 41
由此分析得出：应用侧MediaCardComponent.ets文件中的自定义组件MediaCard通过@Observed+@State方式声明了某个对象类型的数据，并将该变量传给了子组件MediaImage，但在MediaImage中并未使用@ObjectLink接收该变量，而是使用@Prop接收，导致该状态变量发生了深拷贝，深拷贝过程耗时较长3ms 339μs。RS进程丢帧可能是应用进程导致的，如上图RS侧丢了1帧，但可以看到RS侧264帧丢帧原因是由于应用进程的264帧耗时较长，提交较晚导致。
鸿蒙ArkTS容器组件：【RelativeContainer】
2401_82772199的博客
07-11 364
相对布局组件，用于复杂场景中元素对齐的布局。点击或者复制转到。该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
【HarmonyOS NEXT】如何获取UI组件的rect（坐标和大小）
Mayism123的博客
02-21 498
当前使用了如下方法获取UI组件的rect：调用getInspectorByKey接口，通过组件ID获取组件的所有属性，解析后获取$rect的值，再获取对应的起始点坐标和宽高，再通过px2vp转换为vp，得到最后的坐标位置。$rect获取的是相对屏幕左上的距离，包含了UI预留的Title距离。如果是绘制，可以参照其他组件的相对位置绘制。但是这个坐标位置有偏差，有向右下方的偏移。是否还有其他办法来获取UI组件的rect?UI组件 / $rect / 坐标。
HarmonyOS NEXT ArkTs shape填充渐变色
最新发布
09-10
HarmonyOS NEXT（鸿蒙操作系统）的ArkTS（原名方舟）框架中，形状填充渐变色可以通过`colorScheme`和自定义主题功能来实现。以下是一个简单的例子： 1. **创建颜色方案（Color Scheme）**：在`styles.scss`或等类似...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值