鸿蒙NEXT开发ArkUI【ComponentContent】 UI界面
ComponentContent表示组件内容的实体封装，其对象支持在非UI组件中创建与通报，便于开发者对弹窗类组件举行解耦封装。ComponentContent底层使用了BuilderNode阐明
本模块从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
参数：
参数名类型必填阐明uiContext是创建对应节点时候所需要的UI上下文。builder>]是封装不带参builder函数的WrappedBuilder对象。 constructor
constructor(uiContext: UIContext, builder: WrappedBuilder<>, args: T)
ComponentContent的构造函数。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明uiContext是创建对应节点时候所需要的UI上下文。builder>]是封装带参builder函数的WrappedBuilder对象。argsT是WrappedBuilder对象封装的builder函数的参数。 constructor
constructor(uiContext: UIContext, builder: WrappedBuilder<>, args: T, options: BuildOptions)
ComponentContent的构造函数。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明uiContext是创建对应节点时候所需要的UI上下文。builder>]是封装带参builder函数的WrappedBuilder对象。argsT是WrappedBuilder对象封装的builder函数的参数。options是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<>(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;}}@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
示例：
import { BusinessError } from '@kit.BasicServicesKit';import { ComponentContent } from '@kit.ArkUI';
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接口功能为通知对象更新，更新所使用的系统环境由当前的系统环境变化。
示例：
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<>> = 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);
}
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]