未验证 提交 ad75f404 编写于 作者: O openharmony_ci 提交者: Gitee

!2462 2097 处理完成:basic_component_xcomponent.md

Merge pull request !2462 from ester.zhou/TR-2097
...@@ -58,14 +58,16 @@ ...@@ -58,14 +58,16 @@
- [Gauge](ts-basic-components-gauge.md) - [Gauge](ts-basic-components-gauge.md)
- [Image](ts-basic-components-image.md) - [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md) - [ImageAnimator](ts-basic-components-imageanimator.md)
- [Marquee](ts-basic-components-marquee.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md) - [LoadingProgress](ts-basic-components-loadingprogress.md)
- [Progress](ts-basic-components-progress.md) - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md) - [QRCode](ts-basic-components-qrcode.md)
- [Radio](ts-basic-components-radio.md) - [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md) - [Rating](ts-basic-components-rating.md)
- [Select](ts-basic-components-rating.md) - [Search](ts-basic-components-search.md)
- [Span](ts-basic-components-span.md) - [Select](ts-basic-components-select.md)
- [Slider](ts-basic-components-slider.md) - [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- [Text](ts-basic-components-text.md) - [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md) - [TextArea](ts-basic-components-textarea.md)
- [TextInput](ts-basic-components-textinput.md) - [TextInput](ts-basic-components-textinput.md)
...@@ -73,6 +75,9 @@ ...@@ -73,6 +75,9 @@
- [TextTimer](ts-basic-components-texttimer.md) - [TextTimer](ts-basic-components-texttimer.md)
- [Toggle](ts-basic-components-toggle.md) - [Toggle](ts-basic-components-toggle.md)
- [TextClock](ts-basic-components-textclock.md) - [TextClock](ts-basic-components-textclock.md)
- [Web](ts-basic-components-web.md)
- [RichText](ts-basic-components-richtext.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- [PluginComponent](ts-basic-components-plugincomponent.md) - [PluginComponent](ts-basic-components-plugincomponent.md)
- Container Components - Container Components
- [AlphabetIndexer](ts-container-alphabet-indexer.md) - [AlphabetIndexer](ts-container-alphabet-indexer.md)
...@@ -93,6 +98,7 @@ ...@@ -93,6 +98,7 @@
- [RowSplit](ts-container-rowsplit.md) - [RowSplit](ts-container-rowsplit.md)
- [Scroll](ts-container-scroll.md) - [Scroll](ts-container-scroll.md)
- [ScrollBar](ts-basic-components-scrollbar.md) - [ScrollBar](ts-basic-components-scrollbar.md)
- [SideBarContainer](ts-container-sidebarcontainer.md)
- [Stack](ts-container-stack.md) - [Stack](ts-container-stack.md)
- [Swiper](ts-container-swiper.md) - [Swiper](ts-container-swiper.md)
- [Tabs](ts-container-tabs.md) - [Tabs](ts-container-tabs.md)
......
# XComponent
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<XComponent>** can accept and display the EGL/OpenGLES and media data input.
## Required Permissions
None
## Child Components
Not supported
## APIs
XComponent\(value: {id: string, type: string, libraryname?: string, controller?: XComponentController}\)
- Name
| Name | Type | Mandatory| Description |
| ----------- | --------------------------------------------- | ---- | ------------------------------------------------------------ |
| id | string | Yes | Unique ID of the component. The value can contain a maximum of 128 characters. |
| type | string | Yes | Type of the component. The options are as follows:<br>-**surface**: The content of this component is displayed individually, without being combined with that of other components.<br>-**component**: The content of this component is displayed after having been combined with that of other components.<br>This API is defined but not implemented in OpenHarmony 3.1 Release. It will be available for use in OpenHarmony 3.1 MR.|
| libraryname | string | No | Name of the dynamic library generated after compilation at the application native layer. |
| controller | [XComponentController](#XComponentController) | No | Controller bound to the component, which can be used to invoke methods of the component. |
## Events
| Name | Description |
| ------------------------------- | ------------------------ |
| onLoad(context?: object) => void | Triggered when the plug-in is loaded.|
| onDestroy() => void | Triggered when the plug-in is destroyed.|
## XComponentController
Defines the controller of the **\<XComponent>**. You can bind the controller to the **\<XComponent>** to invoke the component methods through the controller.
### Creating an Object
```
xcomponentController: XComponentController = new XComponentController()
```
### getXComponentSurfaceId
getXComponentSurfaceId(): string
Obtains the ID of the surface held by the **\<XComponent>**. The ID can be used for @ohos interfaces, such as camera-related interfaces.
- Return value
| Type | Description |
| ------ | --------------------------- |
| string | ID of the surface held by the **\<XComponent>**.|
### setXComponentSurfaceSize
setXComponentSurfaceSize(value: {surfaceWidth: number, surfaceHeight: number}): void
Sets the width and height of the surface held by the **\<XComponent>**.
- Parameters
| Name | Type| Mandatory| Default Value| Description |
| ------------- | -------- | ---- | ------ | ----------------------------- |
| surfaceWidth | number | Yes | - | Width of the surface held by the **\<XComponent>**.|
| surfaceHeight | number | Yes | - | Height of the surface held by the **\<XComponent>**.|
### getXComponentContext
getXComponentContext(): Object
Obtains the context of an **\<XComponent>** object.
- Return value
| Type | Description |
| ------ | ------------------------------------------------------------ |
| Object | Context of an **\<XComponent>** object. The APIs contained in the context are defined by developers. |
## Example
Provide a surface-type **\<XComponent>** to support capabilities such as camera preview.
```
import camera from '@ohos.multimedia.camera';
@Entry
@Component
struct PreviewArea {
private surfaceId : string =''
xcomponentController: XComponentController = new XComponentController()
build() {
Row() {
XComponent({
id: 'xcomponent',
type: 'surface',
controller: this.xcomponentController
})
.onLoad(() => {
this.xcomponentController.setXComponentSurfaceSize({surfaceWidth:1920,surfaceHeight:1080});
this.surfaceId = this.xcomponentController.getXComponentSurfaceId();
camera.createPreviewOutput(this.surfaceId).then((previewOutput) => {
console.log('Promise returned with the PreviewOutput instance');
})
})
.width('640px')
.height('480px')
}
.backgroundColor(Color.Black)
.position({x: 0, y: 48})
}
}
```
# Basic Components # Basic Components
- [Blank](ts-basic-components-blank.md)
- [Button](ts-basic-components-button.md)
- **[Blank](ts-basic-components-blank.md)** - [Checkbox](ts-basic-components-checkbox.md)
- [CheckboxGroup](ts-basic-components-checkboxgroup.md)
- **[Button](ts-basic-components-button.md)** - [DataPanel](ts-basic-components-datapanel.md)
- [DatePicker](ts-basic-components-datepicker.md)
- **[DataPanel](ts-basic-components-datapanel.md)** - [Divider](ts-basic-components-divider.md)
- [Gauge](ts-basic-components-gauge.md)
- **[DatePicker](ts-basic-components-datepicker.md)** - [Image](ts-basic-components-image.md)
- [ImageAnimator](ts-basic-components-imageanimator.md)
- **[Divider](ts-basic-components-divider.md)** - [Marquee](ts-basic-components-marquee.md)
- [LoadingProgress](ts-basic-components-loadingprogress.md)
- **[Image](ts-basic-components-image.md)** - [Progress](ts-basic-components-progress.md)
- [QRCode](ts-basic-components-qrcode.md)
- **[ImageAnimator](ts-basic-components-imageanimator.md)** - [Radio](ts-basic-components-radio.md)
- [Rating](ts-basic-components-rating.md)
- **[Progress](ts-basic-components-progress.md)** - [Search](ts-basic-components-search.md)
- [Select](ts-basic-components-select.md)
- **[QRCode](ts-basic-components-qrcode.md)** - [Slider](ts-basic-components-slider.md)
- [Span](ts-basic-components-span.md)
- **[Rating](ts-basic-components-rating.md)** - [Text](ts-basic-components-text.md)
- [TextArea](ts-basic-components-textarea.md)
- **[Span](ts-basic-components-span.md)** - [TextInput](ts-basic-components-textinput.md)
- [TextPicker](ts-basic-components-textpicker.md)
- **[Slider](ts-basic-components-slider.md)** - [TextTimer](ts-basic-components-texttimer.md)
- [Toggle](ts-basic-components-toggle.md)
- **[Text](ts-basic-components-text.md)** - [TextClock](ts-basic-components-textclock.md)
- [Web](ts-basic-components-web.md)
- **[TextArea](ts-basic-components-textarea.md)** - [RichText](ts-basic-components-richtext.md)
- [Xcomponent](ts-basic-components-xcomponent.md)
- **[TextInput](ts-basic-components-textinput.md)** - [PluginComponent](ts-basic-components-plugincomponent.md)
\ No newline at end of file
- **[TextPicker](ts-basic-components-textpicker.md)**
- **[TextTimer](ts-basic-components-texttimer.md)**
- **[Toggle](ts-basic-components-toggle.md)**
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册