• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# xcomponent
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @zjsxstar-->
5<!--Designer: @sunbees-->
6<!--Tester: @liuli0427-->
7<!--Adviser: @HelloCrease-->
8
9  > **说明：**
10  > 该组件从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
11
12  用于显示写入了EGL/OpenGLES或媒体数据的组件。
13
14## 权限列表
15
16  无
17
18## 子组件
19
20  不支持。
21
22## 属性
23
24除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
25
26| 名称          | 参数类型   | 必填   | 描述                                       |
27| ----------- | ------ | ---- | ---------------------------------------- |
28| id          | string | 是    | 组件的唯一标识，支持最大的字符串长度128。                   |
29| type        | string | 是    | 用于指定xcomponent组件类型，可选值为：<br/>- surface：组件内容单独送显，直接合成到屏幕。<br/>- component：组件内容与其他组件合成后统一送显。<br/> |
30| libraryname | string | 否    | 应用Native层编译输出动态库名称。                      |
31
32## 样式
33
34支持[通用样式](js-components-common-styles.md)。
35
36## 事件
37
38除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
39
40| 名称                               | 功能描述                                     |
41| -------------------------------- | ---------------------------------------- |
42| onLoad(context?: object) => void | 插件加载完成时回调事件。<br/>context：开发者扩展的xcomponent方法的实例对象，context对象的接口由开发者自定义。 |
43| onDestroy() => void              | 插件卸载完成时回调事件。                             |
44
45## 方法
46
47除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
48
49| 名称                       | 参数                                       | 返回值类型  | 描述                                       |
50| ------------------------ | ---------------------------------------- | ------ | ---------------------------------------- |
51| getXComponentSurfaceId   | -                                        | string | 获取xcomponent对应Surface的ID，供@ohos接口使用，比如camera相关接口。 |
52| setXComponentSurfaceSize | {<br/>surfaceWidth: number,<br/>surfaceHeight: number  <br/>} | -      | 设置xcomponent持有Surface的宽度和高度。             |
53| getXComponentContext     | -                                        | object | 获取开发者扩展的xcomponent方法的实例对象。               |
54
55## 示例
56
57提供surface类型xcomponent，支持相机预览等能力。
58
59   ```html
60<!-- xxx.hml -->
61<div style="height: 500px; width: 500px; flex-direction: column; justify-content: center; align-items: center;">
62	<text id = 'camera' class = 'title'>camera_display</text>
63	<xcomponent id = 'xcomponent' type = 'surface' onload = 'onload' ondestroy = 'ondestroy'></xcomponent>
64</div>
65   ```
66
67   ```js
68// xxx.js
69import camera from '@ohos.multimedia.camera';
70export default {
71    onload() {
72        var surfaceId = this.$element('xcomponent').getXComponentSurfaceId();
73        camera.createPreviewOutput(surfaceId).then((previewOutput) => {
74            console.log('Promise returned with the PreviewOutput instance');
75        })
76    }
77}
78   ```