HarmonyOS 鸿蒙Next 想把函数和UI结合起来怎么做
HarmonyOS 鸿蒙Next 想把函数和UI结合起来怎么做
大概就是我有一个跟dataNode.里面有son,son里面的类型都是dataNode 映射到UI就是 我有一个 Flex,每一个dataNode就是一个Flex结点
import { RenderNode, FrameNode, NodeController ,typeNode} from “@ohos.arkui.node”
import { UIContext } from “@kit.ArkUI”;
export class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null;
makeNode(uiContext: UIContext): FrameNode | null {
let node = new FrameNode(uiContext);
node.commonAttribute.width(“100%”)
.height(50)
.borderColor(Color.Gray).borderColor(Color.Gray)
.borderWidth(1).margin({ left: 10 });
let flex = typeNode.createNode(uiContext, ‘Flex’);
flex.initialize({justifyContent:FlexAlign.SpaceAround,alignItems:ItemAlign.Center})
.width(‘100%’).height(‘100%’).margin({ top: 5 });
node.appendChild(flex);
let flex2 = typeNode.createNode(uiContext, ‘Flex’);
flex2.initialize({justifyContent:FlexAlign.Center,alignItems:ItemAlign.Center,direction:FlexDirection.Column})
.width(‘100%’).height(‘100%’).margin({ top: 5 });
node.appendChild(flex2);
let text = typeNode.createNode(uiContext, ‘Text’);
text.initialize(“Hello”).fontColor(Color.Blue).fontSize(14)
.width(‘100%’).height(‘100%’).margin({ top: 5 });
flex.appendChild(text);
let text2 = typeNode.createNode(uiContext, ‘Text’);
text2.initialize(“Hello2”).fontColor(Color.Black).fontSize(14);
flex2.appendChild(text2);
let text3 = typeNode.createNode(uiContext, ‘Text’);
text3.initialize(“Hello3”).fontColor(Color.Blue).fontSize(14);
flex2.appendChild(text3);
let button = typeNode.createNode(uiContext, ‘Button’);
button.initialize(“button”).fontColor(Color.Blue).fontSize(14);
button.commonEvent.setOnClick(()=>{
console.log(“点击”)
})
flex.appendChild(button);
return node;
}
}
//下面就是很简单的一个index.ets
@Entry
@Component
struct Index {
private myNodeController: MyNodeController = new MyNodeController();
build() {
Row() {
NodeContainer(this.myNodeController)
}
}
}
两个问题,
一个是如果我用typeNode创建button或者text 类型 的FrameNode的时候,是没有办法往上面附加点击事,
一个是我要怎么从index.ets传数据到MyNodeController里面好给新创建的组件赋值
import { UIContext } from "@kit.ArkUI";
class Params {
text: string = “”
constructor(text: string) {
this.text = text;
}
}
// 自定义组件
@Component
struct TextBuilder {
@State message: string = “init”;
build() {
Flex({justifyContent:FlexAlign.SpaceBetween,alignItems:ItemAlign.Center}) {
Text(this.message).fontColor(Color.Blue).fontSize(14).margin({ top: 5 })
Column() {
Text(“Hello”).fontColor(Color.Black).fontSize(14);
Text(“Hello3”).fontColor(Color.Blue).fontSize(14);
}.margin({ top: 5 });
Button(‘button’).fontColor(Color.Blue).fontSize(14);
}.width(‘100%’).height(‘100%’).margin({ top: 5 })
}
}
@Builder
function buildText(params: Params) {
Column() {
TextBuilder({message: params.text})
}
}
export class MyNodeController extends NodeController {
private rootNode: FrameNode | null = null;
private node: BuilderNode<[Params]> | null = null;
private message: string = “”;
constructor(message: string) {
super()
this.message = message
}
makeNode(context: UIContext): FrameNode | null {
this.node = new BuilderNode(context);
this.node.build(wrapBuilder<[Params]>(buildText), new Params(this.message))
return this.node.getFrameNode();
}
update(message: string) {
if (this.node !== null) {
this.node.update(new Params(message));
}
}
}
@Entry
@Component
struct Index {
myNodeController: MyNodeController = new MyNodeController(‘init’);
build() {
Column() {
NodeContainer(this.myNodeController)
.width(‘100%’)
.height(200)
.backgroundColor(’#FFF0F0F0’)
Button(‘更新’).onClick(()=> {
this.myNodeController.update(‘update’);
})
}
}
}
