Cocos Creator 最好用的UI状态管理组件(3.x,2.x可用)

我们开发过程中常有一些界面有多种状态,比如升级界面,可能有解锁、升级中和已满级状态,通过代码控制既不优雅又不直观,所以理想状态下应该通过场景和预制完成这个。
搜遍论坛,大佬们写的用起来多少有点不方便,比如需要给要记录的子节点添加组件,所以自己花了3天时间整理了自己用的组件给大家免费使用。

项目简介

使用方法简单,只需一个在需要记录状态的节点上添加UIState组件,即可记录所有子节点(包含子孙节点)的状态改变

  1. 支持嵌套UIState。子节点(子孙节点)也可以加UIState,维护自己的状态

  2. 数据量小。仅记录修改的节点

  3. 代码逻辑清晰易扩展。可以很方便的扩展记录的组件和属性,支持记录自定义组件

记录自定义组件


2023.06.06 更新
1. 大幅提高编辑状态时的性能。
2. 更方便记录自定义组件。自定义组件只要继承 COMP_ATTR_RECORD 无需修改UIState即可记录


测试场景

嵌套UIState :heavy_check_mark: 父UIState节点不会保存子UIState节点的状态

新增节点 :heavy_check_mark: 在切换到其他状态前,所有状态会保持一致,切换过一次状态后,每个状态会保存自己的数据

新增节点并修改属性 :heavy_check_mark: 在切换到其他状态前,所有状态会保持一致,切换过一次状态后,每个状态会保存自己的数据

删除节点 :heavy_check_mark: 所有状态都会删除该节点

新增组件 :heavy_check_mark: 仅对当前状态生效,其他状态会禁用该组件

删除组件 :heavy_check_mark: 所有状态都会删除该组件

禁用组件 :heavy_check_mark: 仅对当前状态生效

组件测试

Label :heavy_check_mark:

RichText :heavy_check_mark:

Sprite :heavy_check_mark: 特定情况下会出现SpriteFrame没有更新,点击 Creator 能够刷新。使用软刷新场景的接口,编辑器会闪一下,体验不是太好,不过可以保证显示正确

Widget :heavy_check_mark:

构建发布测试

Web桌面 :heavy_check_mark:

3.x github地址:https://github.com/cheney2013/UIState/tree/main
2.x github地址:https://github.com/cheney2013/UIState/tree/uistate-for-2.x

6赞

mark!

能整一个2.X的吗

2.x 版本已更新,欢迎使用哈

东西是好东西,但对结构还是有一定要求的,例如在UIState下最好都是放会变化的节点,不然就会多存一些无用的数据。
所以引申出来的问题就是,没法自定义忽略掉指定的节点,而且没有可视化的列表数据去看记录了哪些节点的哪些属性。

其实不会的,只有修改的节点才会被记录。
Snipaste_2023-06-20_14-48-20

要记录的属性目前没有可视化配置,需要在代码中自己列出,因为这个我感觉还是很方便的
Snipaste_2023-06-20_14-50-40

主要是想在编辑器内可以随时修改、删除某节点中的属性数据。
例如有个节点我突然想用代码去控制,但这个节点已经被记录了下来,我又没法删除…

这个需要倒是很容易实现,你是想删除在当前状态下的记录还是所有状态下的记录


查看记录的数据在3.x的插件中有,2.x犯懒没有做

有点像fgui里的控制器,或许可以参考下。fgui里的控制器中,需要根据状态更改的ui属性是开发者手动编辑的。一般是这样的流程,先添加一个控制器,编写一下控制器的n个状态名。然后在组件上添加一个关联,指定关联哪个控制器,指定关联的类型:坐标、颜色、图片。。。

有点像记录节点快照?在某个时刻界面回到某个状态?

太酷啦,感谢楼主