### 序言 MVI是纯响应式、函数式编程的架构，更加强调数据的单向流动和唯一数据源。这种架构思想多用于传统Web前端领域，当然它同样可以用于Unity的UI设计，毕竟都是数据的同步以及表现层的刷新，该方案就是该思想的Unity实现版本。不管你是使用UGUI，NGUI或者其它，MVI4Unity都可以适用 ![image](https://user-images.githubusercontent.com/38308449/228774903-6d283044-8e66-45ef-bd3d-e185dd0d8fae.png) --- ### 框架概述 *框架大致可以划分为2部分，1是数据的同步管理，这部分就是MVI思想的体现。2是表现层的刷新，表现层是由一个个节点组成的UI树，每当数据更新，都会比较每一个节点来重组UI树以达到界面刷新的目的* --- ### 框架目录 -- Core 框架核心逻辑 * Pool : 框架使用的对象池工具，对于关闭的界面并不是直接销毁，而是回收待重新利用 * StateManager : 状态管理，UI框架数据管理的部分 * Windows : 表现层部分 * Utils : 部分工具代码 -- Sample 演示代码 * StartDemo.cs : 演示代码入口 * Window01.cs是一个基本界面的演示，注释比较全 --- ### 如何管理数据 ![image](https://user-images.githubusercontent.com/38308449/222396422-2055b233-e8a1-4e2a-8834-3e436f1ed7e7.png) * State: 业务逻辑的状态，表现层就是获取最新的State来刷新界面的 * Reducer: 业务逻辑集合，就是一堆函数，采用函数式设计，不维护状态，只负责接收和返回新状态 * Store: 相当于Reducer与表现层交互的中间件，存储维护Reducer派发下来的State并通知表现层 --- ### 如何管理界面（表现层） ![image](https://user-images.githubusercontent.com/38308449/222775679-ec4bca4b-ab88-4b30-93fa-22e3df8d79f5.png) 这里使用节点树来维护UI结构，View就是界面，在这里它作为一个根节点，包含了其他的子元素。ViewNode是节点单元，任何UI元素都是有它构成的使用这种层次分明的结构，能轻易地使用同样的方式来处理“整体/部分”的关系，提供代码复用率，同时也方便框架后续维护扩展 --- ### 如何运行游戏演示 * 游戏的演示场景是Start，双击运行游戏即可 --- ### 如何使用该框架 * 先从数据方面开始说起，UI需要数据来刷新样式，数据这块代码要如何写呢。以Window01.cs作为例子，需要一个Stata类作为状态数据，一个Reduce来更新数据。Reucer与View之间的交互由Store作为桥梁来完成，通过Store.Dispatch来通知状态更新从而刷新界面。 ```c# //状态类 public class State01 : AStateBase { public int count; } //用于刷新状态的函数集合 public class Reducer01 : Reducer { } ``` * Reduce函数定义需要规范，必须符合如下委托签名的任意一种 ```c# ///

/// 同步委托 ///

/// /// /// public delegate S Reducer (S lastState , object @param); ///

/// 异步委托 ///

/// /// /// public delegate Task AsyncReducer (S lastState , object @param); ///
/// 回调委托 ///
/// /// /// public delegate void CallbackReducer (S lastState , object @param , Action setNewState); ``` * 接着来说表现层的代码组织，同样使用Window01.cs来作为例子。继承于Awindow的就是界面预制体组件管理类，提供按钮，文本之类的字段访问，以及一些基本的销毁，激活接口。***它的最大作用就是提供可访问的组件字段，其它的事情不用管，你可以这么理解*** ```c# public class Window01 : AWindow { [AWindowCom ("container1")] public Transform container1; [AWindowCom ("container2")] public Transform container2; [AWindowCom ("btn")] public Button btn; [AWindowCom ("btn2")] public Button btn2; [AWindowCom ("btnClose")] public Button btnClose; } ``` * 然后就是关键一步了，创建对应界面的WindowNodeType节点对象。主界面的就是根节点，主界面下的UI单元就是子节点。我们拿背包来举一个例子，背包主界面是一个根节点，背包里的物品是属于子节点，背包物品也可以有自己的子节点，可以这样套娃写下去。通过代码来构建这样的UI树，当状态刷新时，整棵树都会一起刷新，当然你也可以通过state.currentTag来获取引起刷新的事件来差异化处理刷新 ```c# ///
/// 这是Windown01的界面，同时也是根节点 ///
public static WindowNodeType root = new WindowNodeType ("Windown01" , containerCreator: (window) => { //添加2个Window01里的容器container1，container2 List containerList = PoolMgr.Ins.GetList ().Pop (); containerList.Add (window.container1); containerList.Add (window.container2); return containerList; } , childNodeCreator: (state) => { List> childNodeGroup = PoolMgr.Ins.GetList> ().Pop (); List childNodeList1 = PoolMgr.Ins.GetList ().Pop (); List childNodeList2 = PoolMgr.Ins.GetList ().Pop (); //给这2个容器添加子节点 for ( int i = 0 ; i < state.count ; i++ ) { childNodeList1.Add (item.CreateWindowNode (state)); childNodeList2.Add (item.CreateWindowNode (state)); } childNodeGroup.Add (childNodeList1); childNodeGroup.Add (childNodeList2); return childNodeGroup; } , //状态变更时执行 fillProps: (state , window , store , prop) => { if ( state.currentFunTag == ( int ) Reducer01.Reducer01MethodType.Func01 ) { //由Func01引起的变化 } }); ///
/// 这是WindowItem的节点 ///
public static WindowNodeType item = new WindowNodeType ("WindownItem" , fillProps: (state , window , store , prop) => { }); ``` * 结合Sample案例，你会理解得更快 --- ### 关于框架稳定性 * 为了简化框架，除了核心逻辑部分其他功能都从简了，比如加载资源，框架是直接使用Resource加载的，如果正式使用可以替换接口 * 会**长期维护**，发现问题可以提Issues，第一时间解决 * 所在公司的卡牌养成游戏使用了该方案，**已上线测试** --- ### 未来更新计划 * 加入滚动列表优化 * 优化组件绑定 --- ### 推荐项目 - [JEngine](https://github.com/JasonXuDeveloper/JEngine) - The solution that allows unity games update in runtime. 使Unity开发的游戏支持热更新的解决方案。 - [BDFramework](https://github.com/yimengfan/BDFramework.Core) - Simple and powerful Unity3d game workflow! 简单、高效、高度工业化的商业级unity3d 工作流。本项目借鉴了其状态管理部分 - [Html2UnityRich](https://github.com/Wilson403/Html2UnityRich) - 能够将Html标签转化为Unity支持的富文本标签的库（UGUI or TextPro）