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里面好给新创建的组件赋值


更多关于HarmonyOS 鸿蒙Next 想把函数和UI结合起来怎么做的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
可以用BuilderNode，把UI提取出来，参考demo 
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’);
})
}
}
}

更多关于HarmonyOS 鸿蒙Next 想把函数和UI结合起来怎么做的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，将函数与UI结合起来，通常可以通过自定义组件和自定义构建函数实现。以下是一些具体方法：

  1. 自定义组件：

    • 抽取公共样式或功能，封装成自定义组件。
    • 在组件内部，可以使用函数来处理逻辑，并通过状态管理（如@State）来更新UI。

  2. 自定义构建函数：

    • 使用@Builder装饰器创建自定义构建函数。
    • 自定义构建函数可以接受参数，并根据这些参数来构建UI。
    • 可以在所属组件的build方法或其他自定义构建函数中调用自定义构建函数。

  3. 实践建议：

    • 确保函数逻辑与UI更新紧密相关，以保持应用的一致性和响应性。
    • 遵循HarmonyOS的设计原则和最佳实践，以创建用户友好的界面。

通过上述方法，你可以在HarmonyOS鸿蒙Next中有效地将函数与UI结合起来，实现丰富的交互效果和动态内容更新。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部