NodeContainer
基础组件,不支持尾随添加子节点。组件接受一个NodeController的实例接口。需要NodeController组合使用。
说明:
该组件从API Version 11开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
子组件
不支持子组件。
接口
NodeContainer
NodeContainer(controller: import('../api/@ohos.arkui.node').NodeController)
参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
controller | NodeController | 是 | NodeController用于控制NodeContainer中的节点的上树和下树,反映NodeContainer容器的生命周期。 |
属性
支持通用属性
事件
支持通用事件。
示例
import { UIContext } from '@ohos.arkui.UIContext';
import { NodeController, BuilderNode, FrameNode } from '@ohos.arkui.node';
declare class Params {
text: string
}
@Builder
function buttonBuilder(params: Params) {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
Text(params.text)
.fontSize(12)
Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
.fontSize(12)
.borderRadius(8)
.backgroundColor(0x317aff)
}
.height(100)
.width(200)
}
class MyNodeController extends NodeController {
private rootNode: BuilderNode<[Params]> | null = null;
private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
makeNode(uiContext: UIContext): FrameNode | null {
if (this.rootNode === null) {
this.rootNode = new BuilderNode(uiContext);
this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
}
return this.rootNode.getFrameNode();
}
}
@Entry
@Component
struct Index {
private baseNode: MyNodeController = new MyNodeController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
Text("This is a NodeContainer contains a text and a button ")
.fontSize(9)
.fontColor(0xCCCCCC)
NodeContainer(this.baseNode)
.borderWidth(1)
.onClick(() => {
console.log("click event");
})
}
.padding({ left: 35, right: 35, top: 35 })
.height(200)
.width(300)
}
}