1# XComponent 2 3提供用于图形绘制和媒体数据写入的Surface，XComponent负责将其嵌入到视图中，支持应用自定义Surface位置和大小。 4 5> **说明：** 6> 7> 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11无 12 13## 接口 14 15### XComponent<sup>12+</sup> 16 17XComponent(options: XComponentOptions) 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数:** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ------- | --------------------------------------- | ---- | ------------------------------ | 27| options | [XComponentOptions](#xcomponentoptions12) | 是 | 定义XComponent的具体配置参数。 | 28 29### XComponent<sup>10+</sup> 30 31XComponent(value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController}) 32 33该接口从API version 12开始不再演进，推荐使用[XComponent(options: XComponentOptions)](#xcomponent12)。 34 35**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39**参数:** 40 41| 参数名 | 类型 | 必填 | 说明 | 42| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 43| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | 44| type | [XComponentType](ts-appendix-enums.md#xcomponenttype10) | 是 | 用于指定XComponent组件类型。 | 45| libraryname | string | 否 | 用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅类型为SURFACE或TEXTURE时有效。 | 46| controller | [XComponentController](#xcomponentcontroller) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。 | 47 48### XComponent<sup>(deprecated)</sup> 49 50XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}) 51 52**说明：** 53 54从API version 12开始废弃，建议使用[XComponent(options: XComponentOptions)](#xcomponent12)替代。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数:** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ | 62| id | string | 是 | 组件的唯一标识，支持最大的字符串长度128。 | 63| type | string | 是 | 用于指定XComponent组件类型，可选值仅有两个为：<br/>-"surface"：用于EGL/OpenGLES和媒体数据写入，开发者定制的绘制内容单独展示到屏幕上。<br/>-"component"<sup>9+</sup> ：XComponent将变成一个容器组件，并可在其中执行非UI逻辑以动态加载显示内容。<br/>其他值均会被视为"surface"类型 | 64| libraryname | string | 否 | 应用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅XComponent类型为"surface"时有效。 | 65| controller | [XComponentcontroller](#xcomponentcontroller) | 否 | 给组件绑定一个控制器，通过控制器调用组件方法，仅XComponent类型为"surface"时有效。 | 66 67## XComponentOptions<sup>12+</sup> 68 69定义XComponent的具体配置参数。 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75| 名称 | 类型 | 必填 | 说明 | 76| -------- | -------- | -------- | -------- | 77| type | [XComponentType](ts-appendix-enums.md#xcomponenttype10) | 是 | 用于指定XComponent组件类型。 | 78| controller | [XComponentController](#xcomponentcontroller) | 是 | 给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。 | 79| imageAIOptions | [ImageAIOptions](ts-image-common.md#imageaioptions) | 否 | 给组件设置一个AI分析选项，通过此项可配置分析类型或绑定一个分析控制器。 | 80 81 82## 属性 83除支持通用属性外，还支持以下属性： 84 > 85 > **说明：** 86 > 87 > 不支持foregroundColor、obscured和pixelStretchEffect属性，并且type为SURFACE类型时也不支持动态属性设置、自定义绘制、背景设置(backgroundColor除外)、图像效果(shadow除外)、maskShape和foregroundEffect属性。 88### enableAnalyzer<sup>12+</sup> 89 90enableAnalyzer(enable: boolean) 91 92设置组件支持AI分析，当前支持主体识别、文字识别和对象查找等功能。 93本功能需要搭配XComponentController的[StartImageAnalyzer](#startimageanalyzer12)和[StopImageAnalyzer](#stopimageanalyzer12)一起使用。 94不能和[overlay](ts-universal-attributes-overlay.md)属性同时使用，两者同时设置时overlay中CustomBuilder属性将失效。该特性依赖设备能力。 95 96**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100**参数：** 101 102| 参数名 | 类型 | 必填 | 说明 | 103| -------- | -------- | -------- | -------- | 104| enable | boolean | 是 | 是否启用图像分析功能。 | 105 106 > **说明：** 107 > 108 > 仅type为SURFACE和TEXTURE时该功能有效。 109 110### enableSecure<sup>13+</sup> 111 112enableSecure(isSecure: boolean) 113 114防止组件内自绘制内容被截屏、录屏。 115 116**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 117 118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 119 120**参数：** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| -------- | ------- | ---- | ---------------------- | 124| isSecure | boolean | 是 | 是否开启隐私图层模式。 | 125 126 > **说明：** 127 > 128 > 仅type为SURFACE时有效。 129 > 130 > 不支持[ArkUI NDK接口](../../../ui/ndk-build-ui-overview.md)创建的XComponent组件。 131 132## 事件 133 134从API version 12开始，type为SURFACE或TEXTURE时，支持[通用事件](ts-universal-events-click.md)。 135 136> **说明：** 137> 138> 当配置libraryname参数时，[点击事件](ts-universal-events-click.md)、[触摸事件](ts-universal-events-touch.md)、[挂载卸载事件](ts-universal-events-show-hide.md)、[按键事件](ts-universal-events-key.md)、[焦点事件](ts-universal-focus-event.md)、[鼠标事件](ts-universal-mouse-key.md)仅响应C-API侧事件接口。 139 140**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 141 142仅type为SURFACE或TEXTURE时以下事件有效： 143 144### onLoad 145 146onLoad(callback: (event?: object) => void ) 147 148插件加载完成时回调事件。 149 150**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数:** 155 156| 参数名 | 类型 | 必填 | 说明 | 157| ----- | ------ | ---- | ---------------------------------------- | 158| event | object | 否 | 获取XComponent实例对象的context，context上挂载的方法由开发者在c++层定义。 | 159 160### onDestroy 161 162onDestroy(event: () => void ) 163 164插件卸载完成时回调事件。 165 166**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170## XComponentController 171 172XComponent组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。 173 174**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 175 176**系统能力：** SystemCapability.ArkUI.ArkUI.Full 177 178### 创建对象 179 180``` 181xcomponentController: XComponentController = new XComponentController() 182``` 183 184**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 185 186### constructor 187 188constructor() 189 190XComponentController的构造函数。 191 192**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 193 194**系统能力：** SystemCapability.ArkUI.ArkUI.Full 195 196### getXComponentSurfaceId<sup>9+</sup> 197 198getXComponentSurfaceId(): string 199 200获取XComponent对应Surface的ID，供@ohos接口使用，使用方式可参考[相机管理](../../apis-camera-kit/js-apis-camera.md)，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 201 202**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206**返回值:** 207 208| 类型 | 描述 | 209| ------ | ----------------------- | 210| string | XComponent持有Surface的ID。 | 211 212 213### setXComponentSurfaceSize<sup>(deprecated)</sup> 214 215setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void 216 217设置XComponent持有Surface的宽度和高度，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 218 219该接口从API Version 12开始废弃，建议使用[setXComponentSurfaceRect](#setxcomponentsurfacerect12)替代。 220 221**系统能力：** SystemCapability.ArkUI.ArkUI.Full 222 223**参数:** 224 225| 参数名 | 类型 | 必填 | 说明 | 226| ------------- | ------ | ---- | ----------------------- | 227| surfaceWidth | number | 是 | XComponent持有Surface的宽度。 | 228| surfaceHeight | number | 是 | XComponent持有Surface的高度。 | 229 230 231### getXComponentContext 232 233getXComponentContext(): Object 234 235获取XComponent实例对象的context，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 236 237**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 238 239**系统能力：** SystemCapability.ArkUI.ArkUI.Full 240 241**返回值:** 242 243| 类型 | 描述 | 244| ------ | ------------------------------------------------------------ | 245| Object | 获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义，context内容与onLoad回调中的第一个参数一致。 | 246 247### setXComponentSurfaceRect<sup>12+</sup> 248 249setXComponentSurfaceRect(rect: SurfaceRect): void 250 251设置XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 252 253**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 254 255**系统能力：** SystemCapability.ArkUI.ArkUI.Full 256 257**参数:** 258 259| 参数名 | 类型 | 必填 | 说明 | 260| ------ | ------------------------------------ | ---- | --------------------------------- | 261| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | XComponent持有Surface的显示区域。 | 262 263> **说明：** 264> 265> rect参数中的offsetX/offsetY不设置时，Surface显示区域相对于XComponent左上角x/y轴的偏移效果默认按照居中显示。 266> 267> rect参数中的surfaceWidth和surfaceHeight存在0或负数时，调用该接口设置显示区域不生效。 268> 269> 该方法优先级高于[border](ts-universal-attributes-border.md#border)、[padding](ts-universal-attributes-size.md#padding)等可以改变内容偏移和大小的属性。 270 271### getXComponentSurfaceRect<sup>12+</sup> 272 273getXComponentSurfaceRect(): SurfaceRect 274 275获取XComponent持有Surface的显示区域，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 276 277**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 278 279**系统能力：** SystemCapability.ArkUI.ArkUI.Full 280 281**返回值:** 282 283| 类型 | 描述 | 284| ------------------------------------ | ------------------------------------- | 285| [SurfaceRect](#surfacerect12对象说明) | 获取XComponent持有Surface的显示区域。 | 286 287### onSurfaceCreated<sup>12+</sup> 288 289onSurfaceCreated(surfaceId: string): void 290 291当XComponent持有的Surface创建后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 292 293**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297**参数:** 298 299| 参数名 | 类型 | 必填 | 说明 | 300| --------- | -------- | ---- | ------------------------------------------------- | 301| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 302 303> **说明：** 304> 305> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 306 307### onSurfaceChanged<sup>12+</sup> 308 309onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void 310 311当XComponent持有的Surface大小改变后（包括首次创建时的大小改变）进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 312 313**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 314 315**系统能力：** SystemCapability.ArkUI.ArkUI.Full 316 317**参数:** 318 319| 参数名 | 类型 | 必填 | 说明 | 320| --------- | ------------------------------------- | ---- | ------------------------------------------------------- | 321| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 322| rect | [SurfaceRect](#surfacerect12对象说明) | 是 | 回调该方法的时候，绑定XComponent持有Surface的显示区域。 | 323 324> **说明：** 325> 326> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 327 328### onSurfaceDestroyed<sup>12+</sup> 329 330onSurfaceDestroyed(surfaceId: string): void 331 332当XComponent持有的Surface销毁后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。 333 334**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 335 336**系统能力：** SystemCapability.ArkUI.ArkUI.Full 337 338**参数:** 339 340| 参数名 | 类型 | 必填 | 说明 | 341| --------- | -------- | ---- | ------------------------------------------------- | 342| surfaceId | string | 是 | 回调该方法的时候，绑定XComponent持有Surface的ID。 | 343 344> **说明：** 345> 346> 仅当XComponent组件未设置libraryname参数时，会进行该回调。 347 348### startImageAnalyzer<sup>12+</sup> 349 350startImageAnalyzer(config: ImageAnalyzerConfig): Promise\<void> 351 352配置AI分析并启动AI分析功能，使用前需先[使能](#enableanalyzer12)图像AI分析能力。<br>该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。<br>若该方法尚未执行完毕，此时重复调用，则会触发错误回调。 353 354> **说明：** 355> 356> 分析类型不支持动态修改。 357> 该特性依赖设备能力，不支持该能力的情况下，将返回错误码。 358 359**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 360 361**系统能力：** SystemCapability.ArkUI.ArkUI.Full 362 363**参数：** 364 365| 参数名 | 类型 | 必填 | 说明 | 366| ------ | --------- | ---- | ---------------------------------------------------------------------- | 367| config | [ImageAnalyzerConfig](ts-image-common.md#imageanalyzerconfig) | 是 | 执行AI分析所需要的入参，用于配置AI分析功能。 | 368 369**返回值：** 370 371| 类型 | 说明 | 372| ----------------- | ------------------------------------ | 373| Promise\<void> | Promise对象，用于获取AI分析是否成功执行。 | 374 375**错误码：** 376 377以下错误码的详细介绍请参见[AI分析类库错误码](../errorcode-image-analyzer.md)。 378 379| 错误码ID | 错误信息 | 380| -------- | -------------------------------------------- | 381| 110001 | Image analysis feature is unsupported. | 382| 110002 | Image analysis is currently being executed. | 383| 110003 | Image analysis is stopped. | 384 385### stopImageAnalyzer<sup>12+</sup> 386 387stopImageAnalyzer(): void 388 389停止AI分析功能，AI分析展示的内容将被销毁。 390 391> **说明：** 392> 393> 在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。 394> 该特性依赖设备能力。 395 396**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 397 398**系统能力：** SystemCapability.ArkUI.ArkUI.Full 399 400### setXComponentSurfaceRotation<sup>12+</sup> 401 402setXComponentSurfaceRotation(rotationOptions: SurfaceRotationOptions): void 403 404设置XComponent持有Surface在屏幕旋转时是否锁定方向，仅XComponent类型为SURFACE("surface")时有效。 405 406**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 407 408**系统能力：** SystemCapability.ArkUI.ArkUI.Full 409 410**参数:** 411 412| 参数名 | 类型 | 必填 | 说明 | 413| ------ | ------------------------------------ | ---- | --------------------------------- | 414| rotationOptions | [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 是 | 设置XComponent持有Surface在屏幕旋转时是否锁定方向。 | 415 416> **说明：** 417> 418> rotationOptions未配置时，默认XComponent持有Surface在屏幕旋转时不锁定方向，跟随屏幕进行旋转。 419> 420> 仅在屏幕旋转过程中生效，旋转完成后不再锁定Surface。 421> 422> 仅在屏幕旋转90°，即发生横竖屏切换时生效。 423> 424> 锁定旋转后的Buffer宽高需要保持不变，否则会有拉伸问题。 425 426### getXComponentSurfaceRotation<sup>12+</sup> 427 428getXComponentSurfaceRotation(): Required\<SurfaceRotationOptions> 429 430获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置，仅XComponent类型为SURFACE("surface")时有效。 431 432**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 433 434**系统能力：** SystemCapability.ArkUI.ArkUI.Full 435 436**返回值:** 437 438| 类型 | 描述 | 439| ------------------------------------ | ------------------------------------- | 440| [SurfaceRotationOptions](#surfacerotationoptions12对象说明) | 获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 | 441 442## SurfaceRotationOptions<sup>12+</sup>对象说明 443 444用于描述XComponent持有Surface在屏幕旋转时是否锁定方向的设置。 445 446**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 447 448**系统能力：** SystemCapability.ArkUI.ArkUI.Full 449 450| 名称 | 类型 | 必填 | 说明 | 451| ------------- | ------ | ---- | ------------------------------------------------------------ | 452| lock | boolean | 否 | Surface在屏幕旋转时是否锁定方向，未设置时默认取值为false，即不锁定方向。 | 453 454## SurfaceRect<sup>12+</sup>对象说明 455 456用于描述XComponent持有Surface的显示区域。 457 458**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 459 460**系统能力：** SystemCapability.ArkUI.ArkUI.Full 461 462| 名称 | 类型 | 必填 | 说明 | 463| ------------- | ------ | ---- | ------------------------------------------------------------ | 464| offsetX | number | 否 | Surface显示区域相对于XComponent组件左上角的x轴坐标，单位：px。 | 465| offsetY | number | 否 | Surface显示区域相对于XComponent组件左上角的y轴坐标，单位：px。 | 466| surfaceWidth | number | 是 | Surface显示区域的宽度，单位：px。 | 467| surfaceHeight | number | 是 | Surface显示区域的高度，单位：px。 | 468 469> **说明：** 470> 471> surfaceWidth和surfaceHeight属性在未调用[setXComponentSurfaceRect](ts-basic-components-xcomponent.md#setxcomponentsurfacerect12)也未设置[border](ts-universal-attributes-border.md#border)和[padding](ts-universal-attributes-size.md#padding)等属性时，其取值大小为XComponent组件的大小。 472> 473> surfaceWidth和surfaceHeight属性的取值都不可超过8192px，否则会导致渲染异常。 474 475## 示例 476 477示例效果请以真机运行为准，当前IDE预览器不支持。 478 479### 示例1 480 481图像AI分析功能使用示例。 482 483<!--Del--> 484> **说明：** 485> 486> 本示例画图逻辑具体实现（和nativeRender相关的函数实现）可以参考[ArkTSXComponent示例](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Native/ArkTSXComponent) 487<!--DelEnd--> 488 489```ts 490// xxx.ets 491import { BusinessError } from '@kit.BasicServicesKit'; 492import nativeRender from 'libnativerender.so'; 493 494class CustomXComponentController extends XComponentController { 495 onSurfaceCreated(surfaceId: string): void { 496 console.log(`onSurfaceCreated surfaceId: ${surfaceId}`); 497 nativeRender.SetSurfaceId(BigInt(surfaceId)); 498 } 499 500 onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void { 501 console.log(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`); 502 nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight); 503 } 504 505 onSurfaceDestroyed(surfaceId: string): void { 506 console.log(`onSurfaceDestroyed surfaceId: ${surfaceId}`); 507 nativeRender.DestroySurface(BigInt(surfaceId)); 508 } 509} 510 511@Entry 512@Component 513struct XComponentExample { 514 xComponentController: XComponentController = new CustomXComponentController(); 515 private config: ImageAnalyzerConfig = { 516 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT] 517 }; 518 private aiController: ImageAnalyzerController = new ImageAnalyzerController(); 519 private options: ImageAIOptions = { 520 types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT], 521 aiController: this.aiController 522 }; 523 @State xcWidth: string = "320px"; 524 @State xcHeight: string = "480px"; 525 @State currentStatus: string = "index"; 526 527 build() { 528 Column({ space: 5 }) { 529 Button("change size") 530 .onClick(() => { 531 this.xcWidth = "640px"; 532 this.xcHeight = "720px"; 533 }) 534 Button('start AI analyze') 535 .onClick(() => { 536 this.xComponentController.startImageAnalyzer(this.config); 537 .then(() => { 538 console.log("analysis complete"); 539 }) 540 .catch((error: BusinessError) => { 541 console.log("error code: " + error.code); 542 }) 543 }) 544 Button('stop AI analyze') 545 .onClick(() => { 546 this.xComponentController.stopImageAnalyzer(); 547 }) 548 Button('get analyzer types') 549 .onClick(() => { 550 this.aiController.getImageAnalyzerSupportTypes(); 551 }) 552 Button('Draw Star') 553 .fontSize('16fp') 554 .fontWeight(500) 555 .margin({ bottom: 24 }) 556 .onClick(() => { 557 let surfaceId = this.xComponentController.getXComponentSurfaceId(); 558 this.xComponentController.getXComponentSurfaceRect(); 559 nativeRender.DrawPattern(BigInt(surfaceId)); 560 let hasDraw: boolean = false; 561 if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) { 562 hasDraw = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasDraw; 563 } 564 if (hasDraw) { 565 this.currentStatus = "draw star"; 566 } 567 }) 568 XComponent({ 569 type: XComponentType.SURFACE, 570 controller: this.xComponentController, 571 imageAIOptions: this.options 572 }) 573 .width(this.xcWidth) 574 .height(this.xcHeight) 575 .enableAnalyzer(true) 576 Test(this.currentStatus) 577 .fontSize('24fp') 578 .fontWeight(500) 579 } 580 .width("100%") 581 } 582} 583``` 584<!--RP1--><!--RP1End--> 585 586### 示例2 587 588surface旋转过程中锁定功能使用示例。 589 590```ts 591// xxx.ets 592@Entry 593@Component 594struct Index{ 595 @State isLock: boolean = true; 596 @State xc_width: number = 500; 597 @State xc_height: number = 700; 598 myXComponentController: XComponentController = new XComponentController(); 599 600 build() { 601 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 602 XComponent({ 603 id: 'xComponentId', 604 type: XComponentType.SURFACE, 605 libraryname: 'nativerender', 606 controller: this.myXComponentController 607 }) 608 .width(this.xc_width) 609 .height(this.xc_height) 610 .onLoad(() => { 611 let surfaceRotation: SurfaceRotationOptions = { lock: this.isLock }; 612 this.myXComponentController.setXComponentSurfaceRotation(surfaceRotation); 613 console.log("Surface getXComponentSurfaceRotation lock = " + 614 this.myXComponentController.getXComponentSurfaceRotation().lock); 615 }) 616 } 617 .width('100%') 618 .height('100%') 619 } 620} 621``` 622 623