1# 组件标识 2 3id为组件的唯一标识，在整个应用内唯一。本模块提供组件标识相关接口，可以获取指定id组件的属性，也提供向指定id组件发送事件的功能。 4 5> **说明：** 6> 7> 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12| 名称 | 参数说明 | 描述 | 13| -----| -------- | ----------------------------- | 14| id | string | 组件的唯一标识，唯一性由使用者保证。<br>默认值：'' | 15 16 17## 接口 18 19 20### getInspectorByKey 21 22getInspectorByKey(id: string): string 23 24获取指定id的组件的所有属性，不包括子组件信息。 25此接口为系统接口。 26 27**参数:** 28 29| 参数 | 类型 | 必填 | 描述 | 30| ---- | -------- | ---- | -------------| 31| id | string | 是 | 要获取属性的组件id。 | 32 33**返回值:** 34 35| 类型 | 描述 | 36| -------| -------------- | 37| string | 组件属性列表的JSON字符串。 | 38 39### getInspectorTree 40 41getInspectorTree(): string 42 43获取组件树及组件属性。 44此接口为系统接口。 45 46**返回值:** 47 48| 类型 | 描述 | 49| ------ | --------------------------- | 50| string | 组件树及组件属性列表的JSON字符串。 | 51 52### sendEventByKey 53 54sendEventByKey(id: string, action: number, params: string): boolean 55 56给指定id的组件发送事件。 57此接口为系统接口。 58 59**参数:** 60 61| 参数 | 类型 | 必填 | 描述 | 62| ------ | -------| ---- | -------------------------- | 63| id | string | 是 | 要触发事件的组件的id。 | 64| action | number | 是 | 要触发的事件类型，目前支持取值：<br/>- 点击事件Click: 10<br/>- 长按事件LongClick: 11。 | 65| params | string | 是 | 事件参数，无参数传空字符串 ""。 | 66 67**返回值:** 68 69| 类型 | 描述 | 70| -------- | --------------------------| 71| boolean | 找不到指定id的组件时返回false，其余情况返回true。 | 72 73### sendTouchEvent 74 75sendTouchEvent(event: TouchObject): boolean 76 77发送触摸事件。 78此接口为系统接口。 79 80**参数:** 81 82| 参数 | 类型 | 必填 | 描述 | 83| ----- | ----------- | ---- | ------------------------------------------------------------ | 84| event | [TouchObject](ts-universal-events-touch.md#touchobject对象说明) | 是 | 触发触摸事件的位置，event参数见[TouchEvent](ts-universal-events-touch.md#touchevent对象说明)中TouchObject的介绍。 | 85 86**返回值:** 87 88| 类型 | 描述 | 89| ------- | ---------------------------| 90| boolean | 事件发送失败时返回false，其余情况返回true。 | 91 92### sendKeyEvent 93 94sendKeyEvent(event: KeyEvent): boolean 95 96发送按键事件。 97此接口为系统接口。 98 99**参数:** 100 101| 参数 | 类型 | 必填 | 描述 | 102| ----- | -------- | ---- | ------------------------------------------------------------ | 103| event | [KeyEvent](ts-universal-events-key.md#keyevent对象说明) | 是 | 按键事件，event参数见[KeyEvent](ts-universal-events-key.md#keyevent对象说明)介绍。 | 104 105**返回值:** 106 107| 类型 | 描述 | 108| ------- | ------------------------------| 109| boolean | 事件发送失败时时返回false，其余情况返回true。 | 110 111### sendMouseEvent 112 113sendMouseEvent(event: MouseEvent): boolean 114 115发送鼠标事件。 116此接口为系统接口。 117 118**参数：** 119 120| 参数 | 类型 | 必填 | 描述 | 121| ----- | ---------- | ---- | --------------------------------------- | 122| event | [MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明) | 是 | 鼠标事件，event参数见[MouseEvent](ts-universal-mouse-key.md#mouseevent对象说明)介绍。 | 123 124**返回值：** 125 126| 类型 | 描述 | 127| ------- | ---------------------------------- | 128| boolean | 事件发送失败时返回false，其余情况返回true。 | 129 130## 示例 131 132```ts 133// xxx.ets 134class Utils { 135 static rect_left; 136 static rect_top; 137 static rect_right; 138 static rect_bottom; 139 static rect_value; 140 141 //获取组件所占矩形区域坐标 142 static getComponentRect(key) { 143 let strJson = getInspectorByKey(key); 144 let obj = JSON.parse(strJson); 145 console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj)); 146 let rectInfo = JSON.parse('[' + obj.$rect + ']') 147 console.info("[getInspectorByKey] rectInfo is: " + rectInfo); 148 this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0] 149 this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1] 150 this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0] 151 this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1] 152 return this.rect_value = { 153 "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom 154 } 155 } 156} 157 158@Entry 159@Component 160struct IdExample { 161 @State text: string = '' 162 163 build() { 164 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 165 166 Button() { 167 Text('onKeyTab').fontSize(25).fontWeight(FontWeight.Bold) 168 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 169 .onKeyEvent(() => { 170 this.text = "onKeyTab" 171 }) 172 173 Button() { 174 Text('click to start').fontSize(25).fontWeight(FontWeight.Bold) 175 }.margin({ top: 20 }) 176 .onClick(() => { 177 console.info(getInspectorByKey("click")) 178 console.info(getInspectorTree()) 179 this.text = "Button 'click to start' is clicked" 180 setTimeout(() => { 181 sendEventByKey("longClick", 11, "") // 向id为"longClick"的组件发送长按事件 182 }, 2000) 183 }).id('click') 184 185 Button() { 186 Text('longClick').fontSize(25).fontWeight(FontWeight.Bold) 187 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 188 .gesture( 189 LongPressGesture().onActionEnd(() => { 190 console.info('long clicked') 191 this.text = "Button 'longClick' is longclicked" 192 setTimeout(() => { 193 let rect = Utils.getComponentRect('onTouch') // 获取id为"onTouch"组件的矩形区域坐标 194 let touchPoint: TouchObject = { 195 id: 1, 196 x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 197 y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 198 type: TouchType.Down, 199 screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 200 screenY: rect.left + (rect.right - rect.left) / 2, // 组件中心点y坐标 201 } 202 sendTouchEvent(touchPoint) // 发送触摸事件 203 touchPoint.type = TouchType.Up 204 sendTouchEvent(touchPoint) // 发送触摸事件 205 }, 2000) 206 })).id('longClick') 207 208 Button() { 209 Text('onTouch').fontSize(25).fontWeight(FontWeight.Bold) 210 }.type(ButtonType.Capsule).margin({ top: 20 }) 211 .onClick(() => { 212 console.info('onTouch is clicked') 213 this.text = "Button 'onTouch' is clicked" 214 setTimeout(() => { 215 let rect = Utils.getComponentRect('onMouse') // 获取id为"onMouse"组件的矩形区域坐标 216 let mouseEvent: MouseEvent = { 217 button: MouseButton.Left, 218 action: MouseAction.Press, 219 x: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 220 y: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 221 screenX: rect.left + (rect.right - rect.left) / 2, // 组件中心点x坐标 222 screenY: rect.top + (rect.bottom - rect.top) / 2, // 组件中心点y坐标 223 timestamp: 1, 224 target: { 225 area: { 226 width: 1, 227 height: 1, 228 position: { 229 x: 1, 230 y: 1 231 }, 232 globalPosition: { 233 x: 1, 234 y: 1 235 } 236 } 237 }, 238 source: SourceType.Mouse 239 } 240 sendMouseEvent(mouseEvent) // 发送鼠标事件 241 }, 2000) 242 }).id('onTouch') 243 244 Button() { 245 Text('onMouse').fontSize(25).fontWeight(FontWeight.Bold) 246 }.margin({ top: 20 }).backgroundColor('#0D9FFB') 247 .onMouse(() => { 248 console.info('onMouse') 249 this.text = "Button 'onMouse' in onMouse" 250 setTimeout(() => { 251 let keyEvent: KeyEvent = { 252 type: KeyType.Down, 253 keyCode: 2049, 254 keyText: 'tab', 255 keySource: 4, 256 deviceId: 0, 257 metaKey: 0, 258 timestamp: 0 259 } 260 sendKeyEvent(keyEvent) // 发送按键事件 261 }, 2000) 262 }).id('onMouse') 263 264 Text(this.text).fontSize(25).padding(15) 265 } 266 .width('100%').height('100%') 267 } 268} 269``` 270