cedd425b创建于 2025年8月15日历史提交

XComponent

提供用于图形绘制和媒体数据写入的Surface，XComponent负责将其嵌入到视图中，支持应用自定义Surface位置和大小。具体指南请参考自定义渲染 (XComponent)文档。

说明：

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

子组件

无

接口

XComponent¹⁹⁺

XComponent(params: NativeXComponentParameters)

在Native侧获取XComponent节点实例、注册XComponent持有的Surface的生命周期回调和触摸、鼠标、按键等组件事件回调。

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

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

参数:

参数名	类型	必填	说明
params	NativeXComponentParameters	是	定义XComponent的具体配置参数。

XComponent¹²⁺

XComponent(options: XComponentOptions)

创建XComponent组件，支持在ArkTS侧获取SurfaceId、注册XComponent持有的Surface的生命周期回调和触摸、鼠标、按键等组件事件回调，支持AI分析。

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

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

参数：

参数名	类型	必填	说明
options	XComponentOptions	是	定义XComponent的具体配置参数。

XComponent¹⁰⁺

XComponent(value: {id: string, type: XComponentType, libraryname?: string, controller?: XComponentController})

创建XComponent组件，支持Native侧触发XComponent生命周期回调。

该接口从API version 12开始不再演进，推荐使用XComponent(options: XComponentOptions)。

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

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

参数：

参数名	类型	必填	说明
id	string	是	组件的唯一标识，支持最大的字符串长度128。
type	XComponentType	是	用于指定XComponent组件类型。
libraryname	string	否	用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅类型为SURFACE或TEXTURE时有效。
controller	XComponentController	否	给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。

XComponent^(deprecated)

XComponent(value: {id: string, type: string, libraryname?: string, controller?: XComponentController})

说明：

从API version 12开始废弃，建议使用XComponent(options: XComponentOptions)替代。

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

参数：

参数名	类型	必填	说明
id	string	是	组件的唯一标识，支持最大的字符串长度128。
type	string	是	用于指定XComponent组件类型，可选值仅有两个为： -"surface"：用于EGL/OpenGLES和媒体数据写入，开发者定制的绘制内容单独展示到屏幕上。 -"component"⁹⁺ ：XComponent将变成一个容器组件，并可在其中执行非UI逻辑以动态加载显示内容。其他值均会被视为"surface"类型
libraryname	string	否	应用Native层编译输出动态库名称（对应的动态库不支持跨模块加载），仅XComponent类型为"surface"时有效。
controller	XComponentcontroller	否	给组件绑定一个控制器，通过控制器调用组件方法，仅XComponent类型为"surface"时有效。

XComponentOptions¹²⁺

定义XComponent的具体配置参数。

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

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

名称	类型	只读	可选	说明
type	XComponentType	否	否	用于指定XComponent组件类型。
controller	XComponentController	否	否	给组件绑定一个控制器，通过控制器调用组件方法，仅类型为SURFACE或TEXTURE时有效。
imageAIOptions	ImageAIOptions	否	是	给组件设置一个AI分析选项，通过此项可配置分析类型或绑定一个分析控制器。

NativeXComponentParameters¹⁹⁺

定义XComponent的具体配置参数。通过这种构造参数创建的XComponent，可以将其对应的FrameNode对象传递至Native侧，使用NDK接口进行Surface生命周期的相关设置和监听组件事件。

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

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

名称	类型	只读	可选	说明
type	XComponentType	否	否	用于指定XComponent组件类型。
imageAIOptions	ImageAIOptions	否	是	给组件设置一个AI分析选项，通过此项可配置分析类型或绑定一个分析控制器。

属性

除支持通用属性外，还支持以下属性：

说明：

不支持foregroundColor、obscured和pixelStretchEffect属性，并且type为SURFACE类型时也不支持动态属性设置、自定义绘制、背景设置(backgroundColor除外)、图像效果(shadow除外)、maskShape和foregroundEffect属性。

对于TEXTURE和SURFACE类型的XComponent组件，当不设置renderFit属性时，取默认值为RenderFit.RESIZE_FILL。

对于SURFACE类型的XComponent组件，当组件背景色为不透明的纯黑色时，其renderFit通用属性仅支持设置为RenderFit.RESIZE_FILL，不推荐设置为其他的RenderFit枚举值。

对于使用ArkUI NDK接口创建的XComponent组件，不支持使用属性获取函数getAttribute获取其renderFit属性值。

enableAnalyzer¹²⁺

enableAnalyzer(enable: boolean)

设置组件支持AI分析，当前支持主体识别、文字识别和对象查找等功能。本功能需要搭配XComponentController的StartImageAnalyzer和StopImageAnalyzer一起使用。不能和overlay属性同时使用，两者同时设置时overlay中CustomBuilder属性将失效。该特性依赖设备能力。

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

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

参数：

参数名	类型	必填	说明
enable	boolean	是	是否启用图像分析功能。 true：开启图像分析；false：关闭图像分析。默认值：false

说明：

仅type为SURFACE和TEXTURE时该功能有效。

enableSecure¹³⁺

enableSecure(isSecure: boolean)

防止组件内自绘制内容被截屏、录屏。

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

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

参数：

参数名	类型	必填	说明
isSecure	boolean	是	是否开启隐私图层模式。 true：开启隐私图层模式；false：关闭隐私图层模式。默认值：false

说明：

仅type为SURFACE时有效。

不支持ArkUI NDK接口创建的XComponent组件。

事件

从API version 12开始，type为SURFACE或TEXTURE时，支持通用事件。

说明：

当配置libraryname参数时，点击事件、触摸事件、挂载卸载事件、按键事件、焦点事件、鼠标事件仅响应C-API侧事件接口。

仅type为SURFACE或TEXTURE时以下事件有效：

onLoad

onLoad(callback: OnNativeLoadCallback )

插件加载完成时回调事件。

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

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

参数：

参数名	类型	必填	说明
callback	OnNativeLoadCallback	是	XComponent持有的Surface创建后回调事件。

onDestroy

onDestroy(event: VoidCallback )

插件卸载完成时回调事件。

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

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

参数：

参数名	类型	必填	说明
event	VoidCallback	是	XComponent销毁后回调事件。

OnNativeLoadCallback¹⁸⁺

type OnNativeLoadCallback = (event?: object) => void

XComponent持有的Surface创建后回调事件。

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

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

参数：

参数名	类型	必填	说明
event	object	否	获取XComponent实例对象的context，context上挂载的方法由开发者在Native层定义。

XComponentController

XComponent组件的控制器，可以将此对象绑定至XComponent组件，然后通过控制器来调用组件方法。

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

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

constructor

constructor()

XComponentController的构造函数。

xcomponentController: XComponentController = new XComponentController();

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

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

getXComponentSurfaceId⁹⁺

getXComponentSurfaceId(): string

获取XComponent对应Surface的ID，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

返回值：

类型	说明
string	XComponent持有Surface的ID。

说明：

使用自定义组件节点创建XComponent组件时，因为onLoad回调触发时机早于onSurfaceCreated，所以在onLoad回调中调用getXComponentSurfaceId获取surfaceId会失败，建议在onSurfaceCreated回调中获取。

示例：

// xxx.ets
@Entry
@Component
struct Index {
  myXComponentController: XComponentController = new XComponentController();

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      XComponent({
        type: XComponentType.SURFACE,
        controller: this.myXComponentController
      })
        .onLoad(() => {
          let surfaceId: string = this.myXComponentController.getXComponentSurfaceId();
          console.log("XComponent SurfaceId: " + surfaceId);
        })
    }
  }
}

setXComponentSurfaceSize^(deprecated)

setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void

设置XComponent持有Surface的宽度和高度，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

该接口从API version 12开始废弃，建议使用setXComponentSurfaceRect替代。

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

参数：

参数名	类型	必填	说明
surfaceWidth	number	是	XComponent持有Surface的宽度。
surfaceHeight	number	是	XComponent持有Surface的高度。

getXComponentContext

getXComponentContext(): Object

获取XComponent实例对象的context，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

返回值：

类型	说明
Object	获取XComponent实例对象的context，context包含的具体接口方法由开发者自定义，context内容与onLoad回调中的第一个参数一致。

setXComponentSurfaceRect¹²⁺

setXComponentSurfaceRect(rect: SurfaceRect): void

设置XComponent持有Surface的显示区域，包括宽高和相对于组件左上角的位置坐标，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

参数：

参数名	类型	必填	说明
rect	SurfaceRect	是	XComponent持有Surface的显示区域。

说明：

rect参数中的offsetX/offsetY不设置或传入异常值时，Surface显示区域相对于XComponent左上角x/y轴的偏移效果默认按照居中显示。

rect参数中的surfaceWidth和surfaceHeight存在0、负数或其他异常值时，调用该接口设置显示区域不生效。未调用该接口主动设置Surface显示区域时，surfaceWidth默认与组件宽度一致，surfaceHeight默认与组件高度一致。

该方法优先级高于border、padding等可以改变内容偏移和大小的属性。

getXComponentSurfaceRect¹²⁺

getXComponentSurfaceRect(): SurfaceRect

获取XComponent持有Surface的显示区域，包括宽高和相对于组件左上角的位置坐标，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

返回值：

类型	说明
SurfaceRect	获取XComponent持有Surface的显示区域。

onSurfaceCreated¹²⁺

onSurfaceCreated(surfaceId: string): void

当XComponent持有的Surface创建后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

参数：

参数名	类型	必填	说明
surfaceId	string	是	回调该方法的时候，绑定XComponent持有Surface的ID。

说明：

仅当XComponent组件未设置libraryname参数时，会进行该回调。

onSurfaceChanged¹²⁺

onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void

当XComponent持有的Surface大小改变后（包括首次创建时的大小改变）进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

参数：

参数名	类型	必填	说明
surfaceId	string	是	回调该方法的时候，绑定XComponent持有Surface的ID。
rect	SurfaceRect	是	回调该方法的时候，绑定XComponent持有Surface的显示区域。

说明：

仅当XComponent组件未设置libraryname参数时，会进行该回调。

onSurfaceDestroyed¹²⁺

onSurfaceDestroyed(surfaceId: string): void

当XComponent持有的Surface销毁后进行该回调，仅XComponent类型为SURFACE("surface")或TEXTURE时有效。

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

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

参数：

参数名	类型	必填	说明
surfaceId	string	是	回调该方法的时候，绑定XComponent持有Surface的ID。

说明：

仅当XComponent组件未设置libraryname参数时，会进行该回调。

startImageAnalyzer¹²⁺

startImageAnalyzer(config: ImageAnalyzerConfig): Promise<void>

配置AI分析并启动AI分析功能，使用前需先启用图像AI分析能力。
该方法调用时，将截取调用时刻的画面帧进行分析，使用时需注意启动分析的时机，避免出现画面和分析内容不一致的情况。
若该方法尚未执行完毕，此时重复调用，则会触发错误回调。

说明：

分析类型不支持动态修改。该特性依赖设备能力，不支持该能力的情况下，将返回错误码。

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

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

参数：

参数名	类型	必填	说明
config	ImageAnalyzerConfig	是	执行AI分析所需要的入参，用于配置AI分析功能。

返回值：

类型	说明
Promise<void>	Promise对象，用于获取AI分析是否成功执行。

错误码：

以下错误码的详细介绍请参见AI分析类库错误码。

错误码ID	错误信息
110001	Image analysis feature is unsupported.
110002	Image analysis is currently being executed.
110003	Image analysis is stopped.

stopImageAnalyzer¹²⁺

stopImageAnalyzer(): void

停止AI分析功能，AI分析展示的内容将被销毁。

说明：

在startImageAnalyzer方法未返回结果时调用本方法，会触发其错误回调。该特性依赖设备能力。

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

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

setXComponentSurfaceRotation¹²⁺

setXComponentSurfaceRotation(rotationOptions: SurfaceRotationOptions): void

设置XComponent持有Surface在屏幕旋转时是否锁定方向，仅XComponent类型为SURFACE("surface")时有效。

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

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

参数：

参数名	类型	必填	说明
rotationOptions	SurfaceRotationOptions	是	设置XComponent持有Surface在屏幕旋转时是否锁定方向。

说明：

rotationOptions未配置时，默认XComponent持有Surface在屏幕旋转时不锁定方向，跟随屏幕进行旋转。

仅在屏幕旋转过程中生效，旋转完成后不再锁定Surface。

仅在屏幕旋转90°，即发生横竖屏切换时生效。

锁定旋转后的Buffer宽高需要保持不变，否则会有拉伸问题。

getXComponentSurfaceRotation¹²⁺

getXComponentSurfaceRotation(): Required<SurfaceRotationOptions>

获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置，仅XComponent类型为SURFACE("surface")时有效。

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

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

返回值：

类型	说明
Required<SurfaceRotationOptions>	获取XComponent持有Surface在屏幕旋转时是否锁定方向的设置。

SurfaceRotationOptions¹²⁺对象说明

用于描述XComponent持有Surface在屏幕旋转时是否锁定方向的设置。

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

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

名称	类型	只读	可选	说明
lock	boolean	否	是	Surface在屏幕旋转时是否锁定方向，未设置时默认取值为false，即不锁定方向。 true：锁定方向；false：不锁定方向。

SurfaceRect¹²⁺对象说明

用于描述XComponent持有Surface的显示区域。

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

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

名称	类型	只读	可选	说明
offsetX	number	否	是	Surface显示区域相对于XComponent组件左上角的x轴坐标，单位：px。
offsetY	number	否	是	Surface显示区域相对于XComponent组件左上角的y轴坐标，单位：px。
surfaceWidth	number	否	否	Surface显示区域的宽度，单位：px。
surfaceHeight	number	否	否	Surface显示区域的高度，单位：px。

说明：

surfaceWidth和surfaceHeight属性在未调用setXComponentSurfaceRect也未设置border和padding等属性时，其取值大小为XComponent组件的大小。

surfaceWidth和surfaceHeight属性的取值都不可超过8192px，否则会导致渲染异常。

沉浸式场景下，默认布局的SurfaceRect不包括安全区，需调用setXComponentSurfaceRect接口主动设置Surface显示区域达到沉浸式效果。

示例

示例效果请以真机运行为准，当前DevEco Studio预览器不支持。

示例1（图像AI分析功能）

使用enableAnalyzer属性开启图像AI分析功能。可通过XComponentController控制开始、停止图形AI分析。

说明：

本示例画图逻辑具体实现（和nativeRender相关的函数实现）可以参考ArkTS XComponent示例。

// xxx.ets
import { BusinessError } from '@kit.BasicServicesKit';
import nativeRender from 'libnativerender.so';// 开发者自己实现的so，详见上述说明。

class CustomXComponentController extends XComponentController {
  onSurfaceCreated(surfaceId: string): void {
    console.info(`onSurfaceCreated surfaceId: ${surfaceId}`);
    nativeRender.SetSurfaceId(BigInt(surfaceId));
  }

  onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void {
    console.info(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`);
    nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight);
  }

  onSurfaceDestroyed(surfaceId: string): void {
    console.info(`onSurfaceDestroyed surfaceId: ${surfaceId}`);
    nativeRender.DestroySurface(BigInt(surfaceId));
  }
}

@Entry
@Component
struct XComponentExample {
  xComponentController: XComponentController = new CustomXComponentController();
  private config: ImageAnalyzerConfig = {
    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT]
  };
  private aiController: ImageAnalyzerController = new ImageAnalyzerController();
  private options: ImageAIOptions = {
    types: [ImageAnalyzerType.SUBJECT, ImageAnalyzerType.TEXT],
    aiController: this.aiController
  };
  @State xcWidth: string = "720px";
  @State xcHeight: string = "720px";
  @State currentStatus: string = "index";

  build() {
    Column({ space: 5 }) {
      Row() {
        Text('Native XComponent Sample')
          .fontSize('24fp')
          .fontWeight(500)
          .margin({
            left: 24,
            top: 12
          })
      }
      .margin({ top: 24 })
      .width('100%')
      .height(56)

      XComponent({
        type: XComponentType.SURFACE,
        controller: this.xComponentController,
        imageAIOptions: this.options
      })
        .width(this.xcWidth)
        .height(this.xcHeight)
        .enableAnalyzer(true)
        .onClick(() => {
          let surfaceId = this.xComponentController.getXComponentSurfaceId();
          nativeRender.ChangeColor(BigInt(surfaceId));
          let hasChangeColor: boolean = false;
          if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) {
            hasChangeColor = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasChangeColor;
          }
          if (hasChangeColor) {
            this.currentStatus = "change color";
          }
        })
      Text(this.currentStatus)
        .fontSize('24fp')
        .fontWeight(500)
      Column() {
        Button('start AI analyze')
          .onClick(() => {
            this.xComponentController.startImageAnalyzer(this.config)
              .then(() => {
                console.info("analysis complete");
              })
              .catch((error: BusinessError) => {
                console.error("error code: " + error.code);
              })
          })
          .margin(2)
        Button('stop AI analyze')
          .onClick(() => {
            this.xComponentController.stopImageAnalyzer();
          })
          .margin(2)
        Button('get analyzer types')
          .onClick(() => {
            this.aiController.getImageAnalyzerSupportTypes();
          })
          .margin(2)
        Button('Draw Star')
          .fontSize('16fp')
          .fontWeight(500)
          .margin({ bottom: 24 })
          .onClick(() => {
            let surfaceId = this.xComponentController.getXComponentSurfaceId();
            this.xComponentController.getXComponentSurfaceRect();
            nativeRender.DrawPattern(BigInt(surfaceId));
            let hasDraw: boolean = false;
            if (nativeRender.GetXComponentStatus(BigInt(surfaceId))) {
              hasDraw = nativeRender.GetXComponentStatus(BigInt(surfaceId)).hasDraw;
            }
            if (hasDraw) {
              this.currentStatus = "draw star";
            }
          })
          .margin(2)
      }.justifyContent(FlexAlign.Center)
    }
    .width("100%")
  }
}

AI示例运行图

示例2（在surface旋转过程中锁定）

通过setXComponentSurfaceRotation设置surface在屏幕旋转过程中锁定方向，不跟随屏幕进行旋转。

说明：

本示例画图逻辑具体实现（和nativeRender相关的函数实现）可以参考ArkTS XComponent示例。

// xxx.ets
import nativeRender from 'libnativerender.so';

class MyXComponentController extends XComponentController {
  onSurfaceCreated(surfaceId: string): void {
    console.log(`onSurfaceCreated surfaceId: ${surfaceId}`);
    nativeRender.SetSurfaceId(BigInt(surfaceId));
  }

  onSurfaceChanged(surfaceId: string, rect: SurfaceRect): void {
    console.log(`onSurfaceChanged surfaceId: ${surfaceId}, rect: ${JSON.stringify(rect)}}`);
    nativeRender.ChangeSurface(BigInt(surfaceId), rect.surfaceWidth, rect.surfaceHeight);
  }

  onSurfaceDestroyed(surfaceId: string): void {
    console.log(`onSurfaceDestroyed surfaceId: ${surfaceId}`);
    nativeRender.DestroySurface(BigInt(surfaceId));
  }
}

@Entry
@Component
struct Index {
  @State isLock: boolean = true;
  @State xc_width: number = 500;
  @State xc_height: number = 700;
  myXComponentController: XComponentController = new MyXComponentController();

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
      XComponent({
        id: "XComponent",
        type: XComponentType.SURFACE,
        controller: this.myXComponentController
      })
        .onLoad(() => {
          let surfaceRotation: SurfaceRotationOptions = { lock: this.isLock };
          this.myXComponentController.setXComponentSurfaceRotation(surfaceRotation);
          console.log("Surface getXComponentSurfaceRotation lock = " +
          this.myXComponentController.getXComponentSurfaceRotation().lock);
        })
        .width(this.xc_width)
        .height(this.xc_height)
      Button("Draw")
        .onClick(() => {
          let surfaceId = this.myXComponentController.getXComponentSurfaceId();
          nativeRender.DrawPattern(BigInt(surfaceId));
        })
    }
  }
}

XComponent

子组件

接口

XComponent19+

XComponent12+

XComponent10+

XComponent(deprecated)

XComponentOptions12+

NativeXComponentParameters19+

属性

enableAnalyzer12+

enableSecure13+

事件

onLoad

onDestroy

OnNativeLoadCallback18+

XComponentController

constructor

getXComponentSurfaceId9+

setXComponentSurfaceSize(deprecated)

getXComponentContext

setXComponentSurfaceRect12+

getXComponentSurfaceRect12+

onSurfaceCreated12+

onSurfaceChanged12+

onSurfaceDestroyed12+

startImageAnalyzer12+

stopImageAnalyzer12+

setXComponentSurfaceRotation12+

getXComponentSurfaceRotation12+

SurfaceRotationOptions12+对象说明

SurfaceRect12+对象说明

示例

示例1（图像AI分析功能）

示例2（在surface旋转过程中锁定）

XComponent¹⁹⁺

XComponent¹²⁺

XComponent¹⁰⁺

XComponent^(deprecated)

XComponentOptions¹²⁺

NativeXComponentParameters¹⁹⁺

enableAnalyzer¹²⁺

enableSecure¹³⁺

OnNativeLoadCallback¹⁸⁺

getXComponentSurfaceId⁹⁺

setXComponentSurfaceSize^(deprecated)

setXComponentSurfaceRect¹²⁺

getXComponentSurfaceRect¹²⁺

onSurfaceCreated¹²⁺

onSurfaceChanged¹²⁺

onSurfaceDestroyed¹²⁺

startImageAnalyzer¹²⁺

stopImageAnalyzer¹²⁺

setXComponentSurfaceRotation¹²⁺

getXComponentSurfaceRotation¹²⁺

SurfaceRotationOptions¹²⁺对象说明

SurfaceRect¹²⁺对象说明