鸿蒙NEXT开发ArkUI【ComponentContent】 UI界面

ComponentContent表示组件内容的实体封装，其对象支持在非UI组件中创建与通报，便于开发者对弹窗类组件举行解耦封装。ComponentContent底层使用了BuilderNode
阐明
本模块从API version 12开始支持。后续版本的新增接口，采用上角标单独标志接口的起始版本。
当前不支持在预览器中使用ComponentContent。
导入模块

1. import { ComponentContent } from '@kit.ArkUI';

复制代码

ComponentContent

constructor

constructor(uiContext: UIContext, builder: WrappedBuilder<[]>)
ComponentContent的构造函数。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明uiContext[UIContext]是创建对应节点时候所需要的UI上下文。builder[WrappedBuilder<[]>]是封装不带参builder函数的WrappedBuilder对象。 constructor

constructor(uiContext: UIContext, builder: WrappedBuilder<[T]>, args: T)
ComponentContent的构造函数。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明uiContext[UIContext]是创建对应节点时候所需要的UI上下文。builder[WrappedBuilder<[T]>]是封装带参builder函数的WrappedBuilder对象。argsT是WrappedBuilder对象封装的builder函数的参数。 constructor

constructor(uiContext: UIContext, builder: WrappedBuilder<[T]>, args: T, options: BuildOptions)
ComponentContent的构造函数。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明uiContext[UIContext]是创建对应节点时候所需要的UI上下文。builder[WrappedBuilder<[T]>]是封装带参builder函数的WrappedBuilder对象。argsT是WrappedBuilder对象封装的builder函数的参数。options[BuildOptions]是build的配置参数，判断是否支持@Builder中嵌套@Builder的行为。 示例：

1. import { ComponentContent, NodeContent, typeNode } from "@kit.ArkUI"
3. interface ParamsInterface {
4.   text: string;
5.   func: Function;
6. }
8. @Builder
9. function buildTextWithFunc(fun: Function) {
10.   Text(fun())
11.     .fontSize(50)
12.     .fontWeight(FontWeight.Bold)
13.     .margin({ bottom: 36 })
14. }
16. @Builder
17. function buildText(params: ParamsInterface) {
18.   Column() {
19.     Text(params.text)
20.       .fontSize(50)
21.       .fontWeight(FontWeight.Bold)
22.       .margin({ bottom: 36 })
23.     buildTextWithFunc(params.func)
24.   }
25. }
27. @Entry
28. @Component
29. struct Index {
30.   @State message: string = "HELLO"
31.   private content: NodeContent = new NodeContent();
33.   build() {
34.     Row() {
35.       Column() {
36.         Button('addComponentContent')
37.           .onClick(() => {
38.             let column = typeNode.createNode(this.getUIContext(), "Column");
39.             column.initialize();
40.             column.addComponentContent(new ComponentContent<ParamsInterface>(this.getUIContext(),
41.               wrapBuilder<[ParamsInterface]>(buildText), {
42.                 text: this.message, func: () => {
43.                   return "FUNCTION"
44.                 }
45.               }, { nestingBuilderSupported: true }))
46.             this.content.addFrameNode(column);
47.           })
48.         ContentSlot(this.content)
49.       }
50.       .id("column")
51.       .width('100%')
52.       .height('100%')
53.     }
54.     .height('100%')
55.   }
56. }

复制代码

update

update(args: T): void
用于更新WrappedBuilder对象封装的builder函数参数，与constructor传入的参数类型保持同等。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明argsT是用于更新WrappedBuilder对象封装的builder函数参数，与constructor传入的参数类型保持同等。 示例：

1. import { ComponentContent } from "@kit.ArkUI";
3. class Params {
4.   text: string = ""
5.   constructor(text: string) {
6.     this.text = text;
7.   }
8. }
10. @Builder
11. function buildText(params: Params) {
12.   Column() {
13.     Text(params.text)
14.       .fontSize(50)
15.       .fontWeight(FontWeight.Bold)
16.       .margin({bottom: 36})
17.   }.backgroundColor('#FFF0F0F0')
18. }
20. @Entry
21. @Component
22. struct Index {
23.   @State message: string = "hello"
25.   build() {
26.     Row() {
27.       Column() {
28.         Button("click me")
29.             .onClick(() => {
30.                 let uiContext = this.getUIContext();
31.                 let promptAction = uiContext.getPromptAction();
32.                 let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));
33.                 promptAction.openCustomDialog(contentNode);
35.                 setTimeout(() => {
36.                   contentNode.update(new Params("new message"));
37.                 }, 2000);    //2秒后自动更新弹窗内容文本
38.             })
39.       }
40.       .width('100%')
41.       .height('100%')
42.     }
43.     .height('100%')
44.   }
45. }

复制代码

reuse

reuse(param?: Object): void
通报reuse事件到ComponentContent中的自界说组件。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明paramObject否用于复用WrappedBuilder对象封装的builder函数参数，与constructor传入的参数类型保持同等。 recycle

recycle(): void
通报recycle事件到ComponentContent中的自界说组件。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full

1. import { ComponentContent } from '@kit.ArkUI';
2. class Params {  text: string = ""  constructor(text: string) {    this.text = text;  }}@Builderfunction buildText(params: Params) {  ReusableChildComponent2({ text: params.text });}@Componentstruct ReusableChildComponent2 {  @Prop text: string = "false";  aboutToReuse(params: Record<string, object>) {    console.log("ReusableChildComponent2 Reusable " + JSON.stringify(params));  }  aboutToRecycle(): void {    console.log("ReusableChildComponent2 aboutToRecycle " + this.text);  }  build() {    Column() {      Text(this.text)        .fontSize(50)        .fontWeight(FontWeight.Bold)        .margin({ bottom: 36 })    }.backgroundColor('#FFF0F0F0')  }}@Entry@Componentstruct Index {  @State message: string = "hello"  build() {    Row() {      Column() {        Button("click me")          .onClick(() => {            let uiContext = this.getUIContext();            let promptAction = uiContext.getPromptAction();            let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));            promptAction.openCustomDialog(contentNode);            setTimeout(() => {              contentNode.reuse(new Params("new message"));              contentNode.recycle();            }, 2000); //2秒后自动更新弹窗内容文本          })      }      .width('100%')      .height('100%')    }    .height('100%')  }}

复制代码

dispose

dispose(): void
立即开释当前ComponentContent，即ComponentContent对象与后端实体节点排除引用关系。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
示例：

1. import { BusinessError } from '@kit.BasicServicesKit';import { ComponentContent } from '@kit.ArkUI';
2. class Params {  text: string = ""  constructor(text: string) {    this.text = text;  }}@Builderfunction buildText(params: Params) {  Column() {    Text(params.text)      .fontSize(50)      .fontWeight(FontWeight.Bold)      .margin({bottom: 36})  }.backgroundColor('#FFF0F0F0')}@Entry@Componentstruct Index {  @State message: string = "hello"  build() {    Row() {      Column() {        Button("click me")            .onClick(() => {                let uiContext = this.getUIContext();                let promptAction = uiContext.getPromptAction();                let contentNode = new ComponentContent(uiContext, wrapBuilder(buildText), new Params(this.message));                promptAction.openCustomDialog(contentNode);                setTimeout(() => {                  promptAction.closeCustomDialog(contentNode)                    .then(() => {                      console.info('customdialog closed.')                      if (contentNode !== null) {                        contentNode.dispose();   //开释contentNode                      }                    }).catch((error: BusinessError) => {                      let message = (error as BusinessError).message;                      let code = (error as BusinessError).code;                      console.error(`closeCustomDialog args error code is ${code}, message is ${message}`);                    })                }, 2000);     //2秒后自动关闭            })      }      .width('100%')      .height('100%')    }    .height('100%')  }}

复制代码

updateConfiguration

updateConfiguration(): void
通报[系统环境变化]事件，触发节点的全量更新。
元服务API：  从API version 12开始，该接口支持在元服务中使用。
系统能力：  SystemCapability.ArkUI.ArkUI.Full
阐明
updateConfiguration接口功能为通知对象更新，更新所使用的系统环境由当前的系统环境变化。
示例：

1. import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI';
2. import { AbilityConstant, Configuration, EnvironmentCallback } from '@kit.AbilityKit';
4. @Builder
5. function buildText() {
6.   Column() {
7.     Text('hello')
8.       .width(50)
9.       .height(50)
10.       .fontColor($r(`app.color.text_color`))
11.   }.backgroundColor($r(`app.color.start_window_background`))
12. }
14. const componentContentMap: Array<ComponentContent<[Object]>> = new Array();
16. class MyNodeController extends NodeController {
17.   private rootNode: FrameNode | null = null;
19.   makeNode(uiContext: UIContext): FrameNode | null {
20.     return this.rootNode;
21.   }
23.   createNode(context: UIContext) {
24.     this.rootNode = new FrameNode(context);
25.     let component = new ComponentContent<Object>(context, wrapBuilder(buildText));
26.     componentContentMap.push(component);
27.     this.rootNode.addComponentContent(component);
28.   }
30.   deleteNode() {
31.     let node = componentContentMap.pop();
32.     this.rootNode?.dispose();
33.     node?.dispose();
34.   }
35. }
37. function updateColorMode() {
38.   componentContentMap.forEach((value, index) => {
39.     value.updateConfiguration();
40.   })
41. }
43. @Entry
44. @Component
45. struct FrameNodeTypeTest {
46.   private myNodeController: MyNodeController = new MyNodeController();
48.   aboutToAppear(): void {
49.     let environmentCallback: EnvironmentCallback = {
50.       onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {
51.         console.log('onMemoryLevel');
52.       },
53.       onConfigurationUpdated: (config: Configuration): void => {
54.         console.log('onConfigurationUpdated ' + JSON.stringify(config));
55.         updateColorMode();
56.       }
57.     }
58.     // 注册监听回调
59.     this.getUIContext().getHostContext()?.getApplicationContext().on('environment', environmentCallback);
60.     this.myNodeController.createNode(this.getUIContext());
61.   }
63.   aboutToDisappear(): void {
64.     //移除map中的引用，并将自定义节点释放
65.     this.myNodeController.deleteNode();
66.   }
68.   build() {
69.     Row() {
70.       NodeContainer(this.myNodeController);
71.     }
72.   }
73. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。