鸿蒙5.0开发进阶：ArkTS API UI界面（ArkUI）-ComponentContent

原创 于 2024-12-13 16:05:03 发布 · 1k 阅读 · 16 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #前端 #ArkTS #ArkUI

往期鸿蒙全套实战文章必看：（文中附带全栈鸿蒙学习资料）

ComponentContent

ComponentContent表示组件内容的实体封装，其对象支持在非UI组件中创建与传递，便于开发者对弹窗类组件进行解耦封装。

说明

本模块从API version 12开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。

当前不支持在预览器中使用ComponentContent。

导入模块

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

ComponentContent

constructor

constructor(uiContext: UIContext, builder: WrappedBuilder<[]>)

ComponentContent的构造函数。

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

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

参数：

参数名类型必填说明
uiContextUIContext是创建对应节点时候所需要的UI上下文。
builderWrappedBuilder<[]>是封装不带参builder函数的WrappedBuilder对象。

constructor

constructor(uiContext: UIContext, builder: WrappedBuilder<[T]>, args: T)

ComponentContent的构造函数。

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

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

参数：

参数名类型必填说明
uiContextUIContext是创建对应节点时候所需要的UI上下文。
builderWrappedBuilder<[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

参数：

参数名类型必填说明
uiContextUIContext是创建对应节点时候所需要的UI上下文。
builderWrappedBuilder<[T]>是封装带参builder函数的WrappedBuilder对象。
argsT是WrappedBuilder对象封装的builder函数的参数。
optionsBuildOptions是build的配置参数，判断是否支持@Builder中嵌套@Builder的行为。

示例：

import { ComponentContent, NodeContent, typeNode } from "@kit.ArkUI"

interface ParamsInterface {
text: string;
func: Function;
}

@Builder
function buildTextWithFunc(fun: Function) {
Text(fun())
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 36 })
}

@Builder
function buildText(params: ParamsInterface) {
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({ bottom: 36 })
buildTextWithFunc(params.func)
}
}

@Entry
@Component
struct Index {
@State message: string = "HELLO"
private content: NodeContent = new NodeContent();

build() {
Row() {
Column() {
Button('addComponentContent')
.onClick(() => {
let column = typeNode.createNode(this.getUIContext(), "Column");
column.initialize();
column.addComponentContent(new ComponentContent<ParamsInterface>(this.getUIContext(),
wrapBuilder<[ParamsInterface]>(buildText), {
text: this.message, func: () => {
return "FUNCTION"
}
}, { nestingBuilderSupported: true }))
this.content.addFrameNode(column);
})
ContentSlot(this.content)
}
.id("column")
.width('100%')
.height('100%')
}
.height('100%')
}
}

update

update(args: T): void

用于更新WrappedBuilder对象封装的builder函数参数，与constructor传入的参数类型保持一致。

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

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

参数：

参数名类型必填说明
argsT是用于更新WrappedBuilder对象封装的builder函数参数，与constructor传入的参数类型保持一致。

示例：

import { ComponentContent } from "@kit.ArkUI";

class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
}

@Builder
function buildText(params: Params) {
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({bottom: 36})
}.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct 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.update(new Params("new message"));
}, 2000); //2秒后自动更新弹窗内容文本
})
}
.width('100%')
.height('100%')
}
.height('100%')
}
}

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

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

class Params {
text: string = ""

constructor(text: string) {
this.text = text;
}
}

@Builder
function buildText(params: Params) {
ReusableChildComponent2({ text: params.text });
}

@Component
struct 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
@Component
struct 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

示例：

import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent } from '@kit.ArkUI';

class Params {
text: string = ""
constructor(text: string) {
this.text = text;
}
}

@Builder
function buildText(params: Params) {
Column() {
Text(params.text)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.margin({bottom: 36})
}.backgroundColor('#FFF0F0F0')
}

@Entry
@Component
struct 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接口功能为通知对象更新，更新所使用的系统环境由当前的系统环境变化。

示例：

import { NodeController, FrameNode, ComponentContent, typeNode } from '@kit.ArkUI';
import { AbilityConstant, Configuration, EnvironmentCallback } from '@kit.AbilityKit';

@Builder
function buildText() {
Column() {
Text('hello')
.width(50)
.height(50)
.fontColor($r(`app.color.text_color`))
}.backgroundColor($r(`app.color.start_window_background`))
}

const componentContentMap: Array<ComponentContent<[Object]>> = new Array();

class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null;

makeNode(uiContext: UIContext): FrameNode | null {
return this.rootNode;
}

createNode(context: UIContext) {
this.rootNode = new FrameNode(context);
let component = new ComponentContent<Object>(context, wrapBuilder(buildText));
componentContentMap.push(component);
this.rootNode.addComponentContent(component);
}

deleteNode() {
let node = componentContentMap.pop();
this.rootNode?.dispose();
node?.dispose();
}
}

function updateColorMode() {
componentContentMap.forEach((value, index) => {
value.updateConfiguration();
})
}

@Entry
@Component
struct FrameNodeTypeTest {
private myNodeController: MyNodeController = new MyNodeController();

aboutToAppear(): void {
let environmentCallback: EnvironmentCallback = {
onMemoryLevel: (level: AbilityConstant.MemoryLevel): void => {
console.log('onMemoryLevel');
},
onConfigurationUpdated: (config: Configuration): void => {
console.log('onConfigurationUpdated ' + JSON.stringify(config));
updateColorMode();
}
}
// 注册监听回调
this.getUIContext().getHostContext()?.getApplicationContext().on('environment', environmentCallback);
this.myNodeController.createNode(this.getUIContext());
}

aboutToDisappear(): void {
//移除map中的引用，并将自定义节点释放
this.myNodeController.deleteNode();
}

build() {
Row() {
NodeContainer(this.myNodeController);
}
}
}
 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值