代码拉取完成,页面将自动刷新
同步操作将从 OpenHarmony-SIG/node_pool 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
专门为OpenHarmony打造的一款全局自定义组件复用的三方库,致力于更高效、更轻便、更简单。
通过BuilderNode创建全局的自定义组件复用池,实现跨页面的组件复用。
ohpm install @hadss/nodepool
import { NodeItem, CustomNodePoolFactory } from '@hadss/nodepool';
class Params {
text: string = "this is a text";
constructor(text: string) {
this.text = text;
}
}
@Builder
function ButtonBuilder(params: Params) {
Column() {
Button(`button ` + params.text)
.borderWidth(2)
.backgroundColor(Color.Orange)
.width("100%")
.height("100%")
.gesture(
TapGesture()
.onAction((event: GestureEvent) => {
console.log("TapGesture");
})
)
}
.width('100%')
.height(300)
.backgroundColor(Color.Gray)
}
let btnBuilder: WrappedBuilder<ESObject> = wrapBuilder<ESObject>(ButtonBuilder);
const REUSE_VIEW_TYPE_SWIPER: string = 'reuse_type_swiper_';
@Entry
@Component
struct Index {
private nodePoolFactory: CustomNodePoolFactory = new CustomNodePoolFactory();
private controller: NodeItem | undefined;
private typeCfg: TypeReuseConfig = {
type: REUSE_VIEW_TYPE_SWIPER,
expirationTime: 30 * 60 * 1000, // 老化时间
reuseCallback: this.reuseCallback,
recycleCallback: this.recycleCallback
}
// 组件复用生命周期回调
private reuseCallback(item: NodeItem): void {
console.log('tag1', `reuseCallback, id:${item.id}`);
}
// 组件回收生命周期回调
private recycleCallback(item: NodeItem): void {
console.log('tag1', `recycleCallback, id:${item.id}`);
}
aboutToAppear(): void {
this.nodePoolFactory.getCommonNodePool().setTypeReuseConfig(this.typeCfg);
// 组件复用
this.controller = this.nodePoolFactory.getCommonNodePool().getNode(REUSE_VIEW_TYPE_SWIPER, {
text: 'hello'
}, btnBuilder);
}
build() {
Column() {
NodeContainerProxy({ nodeItem: this.controller })
Text("点我进行参数传递和触摸事件传递")
.width('100%')
.height(300)
.backgroundColor(Color.Pink)
.onTouch((event) => {
if (event != undefined) {
this.controller?.postTouchEvent(event); // 触摸事件传递
this.controller?.node?.update(new Params("on update data")); // 参数传递
}
})
}
}
}
参数名称 | 入参内容 | 功能简介 |
---|---|---|
nodeItem | NodeItem, undefined | 节点Controller |
接口名称 | 入参内容 | 功能简介 |
---|---|---|
getCommonNodePool | NA | 获取单例节点池 |
getNodePool | NodePoolConfig | 获取多例节点池 |
参数名称 | 入参内容 | 功能简介 |
---|---|---|
typeCount | number | 节点种类数量,默认值:50 |
nodeSize | number | 某种节点数量,默认值:100 |
expirationTime | number | 老化时间,默认值:24小时。单位ms |
reuseCallback | ReuseCallback | 复用时回调函数 |
recycleCallback | RecycleCallback | 回收时回调函数 |
接口名称 | 入参内容 | 功能简介 |
---|---|---|
getNode | type: string, data: ESObject, builder: WrappedBuilder | 获取节点Controller |
getWebNode | data: WebData, builder: WrappedBuilder<WebData[]> | 获取web节点Controller |
preCreateNode | type: string, data: ESObject, builder: WrappedBuilder, uiContext: UIContext | 预创建节点进池 |
preCreateWebNode | data: WebData, builder: WrappedBuilder<WebData[]>, uiContext: UIContext | 预创建web节点进池 |
setTypeReuseConfig | typeCfg: TypeReuseConfig | 设置不同类型节点的老化时间 |
setRecycleCallback | recycleCallback: RecycleCallback | 设置回收回调 |
setReuseCallback | reuseCallback: ReuseCallback | 设置复用回调 |
参数名称 | 入参内容 | 功能简介 |
---|---|---|
type | string | 节点种类,可自定义 |
data | ESObject | 节点数据 |
builder | WrappedBuilder | 创建节点树所需的无状态UI方法@Builder |
参数名称 | 入参内容 | 功能简介 |
---|---|---|
type | string | 节点种类,可自定义 |
expirationTime | number | 老化时间,可自定义 |
reuseCallback | ReuseCallback | 组件复用回调函数,可为空 |
recycleCallback | ReuseCallback | 组件回收回调函数,可为空 |
参数名称 | 入参内容 | 功能简介 |
---|---|---|
url | string | url地址 |
controller | WebviewController | webview控制器 |
onActive | boolean | 是否进入前台激活状态,默认值:true |
uiContext | UIContext | UI上下文实例 |
aboutToAppear(): void {
webData.uiContext = this.getUIContext();
nodepool.preCreateWebNode(webData, warp);
}
item: NodeItem | undefined = nodepool.getWebNode(webData, warp);
Column() {
NodeContainerProxy({ nodeItem: this.item })
}
Web({ src: data.url, controller: data.controller })
.width('100%')
.height('100%')
.onPageBegin(() => {
if (data.onActive) {
data.controller.onActive()
}
})
@Observed
export class ViewItem extends XComponentWithImage {
index: number = 0; // 索引
type: string = ''; // 卡片类型
title: string = ''; // 标题
coverImage: Resource | string = ''; // 封面图片
...
}
private reuseCallback(item: NodeItem): void {
if (item?.data?.item instanceof ViewItem) {
let newItem: ViewItem = item.data.item as ViewItem;
newItem.shouldClearImageCache = false;
}
}
private recycleCallback(item: NodeItem): void {
if (item?.data?.item instanceof ViewItem) {
let newItem: ViewItem = item.data.item as ViewItem;
newItem.shouldClearImageCache = true;
}
}
Image(this.item.getImageSource(this.item.coverImage))
在下述版本验证通过:
SDK:API12
|---- node_pool
| |---- entry # 示例代码文件夹
| |---- nodepool # nodepool库文件夹
| |---- index.ets # 对外接口
│ └--src/main/ets # 框架代码目录
│ ├----constants # 常量目录
│ │
│ ├----lib # 组件复用三方库核心代码目录
│ │
│ ├----model # 各类型图表目录
│ │
│ └----utils # 工具类目录
│
└─---- README.md # 安装使用方法
使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR 。
本项目基于 Apache License 2.0 ,请自由地享受和参与开源。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。