XComponent

可用于EGL/OpenGLES和媒體數據寫入，并顯示在XComponent組件。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 11 開始支持跨平臺。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

構造參數type為"surface"時不支持。

接口

XComponent

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

參數:

XComponent

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

參數:

XComponentType枚舉說明

說明：

type為COMPONENT("component")時，XComponent作為容器，子組件沿垂直方向布局：

• 垂直方向上對齊格式：[FlexAlign].Start
• 水平方向上對齊格式：[FlexAlign].Center

所有的事件響應均不支持。

布局方式更改和事件響應均可通過掛載子組件來設置。

內部所寫的非UI邏輯需要封裝在一個或多個函數內。

屬性

• XComponent顯示的內容，可由開發者自定義繪制，通用屬性中的[背景設置]、[透明度設置]和[圖像效果]按照type類型有限支持。
• type為SURFACE("surface")時僅支持[圖像效果]中的shadow屬性，建議使用EGL/OpenGLES提供的接口設置相關內容。

  說明：

  從API version 11開始，type為SURFACE("surface")時支持[背景顏色設置]

• type為COMPONENT("component")時僅支持[圖像效果]中的shadow屬性，建議使用掛載子組件的方式進行設置相關內容。

事件

僅type為SURFACE("surface")或TEXTURE時以下事件有效。不支持[通用事件]

onLoad

onLoad(callback: (event?: object) => void )

插件加載完成時回調事件。

參數:

onDestroy

onDestroy(event: () => void )

插件卸載完成時回調事件。

XComponentController

xcomponent 組件的控制器，可以將此對象綁定至XComponent組件，然后通過控制器來調用組件方法。

創建對象

xcomponentController: XComponentController = new XComponentController()

getXComponentSurfaceId

getXComponentSurfaceId(): string

獲取XComponent對應Surface的ID，僅XComponent類型為SURFACE("surface")或TEXTURE時有效。

返回值:

setXComponentSurfaceSize(deprecated)

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

設置XComponent持有Surface的寬度和高度，僅XComponent類型為SURFACE("surface")或TEXTURE時有效。

該接口從API Version 12開始廢棄。

參數:

getXComponentContext

getXComponentContext(): Object

獲取XComponent實例對象的context，僅XComponent類型為SURFACE("surface")或TEXTURE時有效。

返回值:

示例效果請以真機運行為準，當前IDE預覽器不支持。

// xxx.ets
@Entry
@Component
struct PreviewArea {
  private surfaceId: string = ''
  private xComponentContext: Record< string, () = > void > = {}
  xComponentController: XComponentController = new XComponentController()

  build() {
    Column() {
      Text(JSON.stringify(this.rect))
        .fontSize(12)
      XComponent({
        id: 'xcomponent',
        type: XComponentType.SURFACE,
        controller: this.xComponentController
      })
        .onLoad(() = > {
          this.surfaceId = this.xComponentController.getXComponentSurfaceId()
          this.xComponentContext = this.xComponentController.getXComponentContext() as Record< string, () = > void >
        })
        .width('640px')
        .height('480px')
    }
    .position({ x: 0, y: 48 })
  }
}

審核編輯 黃宇