NGUI 学习笔记实战之二——商城数据绑定（Ndata）

阅读量：7068 次

发布时间：2019-06-28

本文共 4928 字，大约阅读时间需要 16 分钟。

上次笔记实现了游戏商城的UI界面，没有实现动态数据绑定，所以是远远不够的。今天采用NData来做一个商城。

　如果你之前没看过，可以参考上一篇博客

　 NGUI 学习笔记实战——制作商城UI界面

一、NData介绍以及优点

　大体来说NData就是一个NGUI 的 MVVM 框架插件，如果你问我什么是MVVM，我也只能说类似于MVC，至于什么是MVC…………

说道NData的优点，我们先来看这个，如果要写商城逻辑，一般如下：

　　这个逻辑很简单，但是之前我实现是在OnMouse这类函数中进行判断，然后直接与底层数据交互。这还没什么，如果底层商城的商品种类增加，那么我还得在UI进行构造新的UI部件。

最后，让我无法容忍的就是，这些UI部件的显示的数据我还要记住这些UI部件的路径，一个个翻过去找，如果路径复杂就很麻烦。刚开始还没什么，时间一长就要吐了。

　　这些用NData就可以很方便的解决，大体的解决思路就和上面那张图差不多，他在UI和逻辑层中又多加了一层，类似于页面逻辑模型，并且将页面逻辑模型的数据和显示UI上的部件绑定。做到了动态刷新。

　　之后你对页面所有的操作都可以通过对这个页面模型交互来实现，做到了逻辑和UI分离的境界。

二、创建ViewModel模板

　　可能你看的刚才云里雾里，那么你可以省略刚才那段话，更多的时候领悟是在实践中才发现。

　　我们现在先编写一个页面模型，模板如下：

using UnityEngine; public class $game$Ui : EZData.Context{ //TODO: add your dependency properties and collections here 	//绑定页面上的属性	#region Property $name$	private readonly EZData.Property<$type$> _private$name$Property 									= new EZData.Property<$type$>();	public EZData.Property<$type$> $name$Property 									{ get { return _private$name$Property; } }	public $type$ $name$	{	get    { return $name$Property.GetValue();    }	set    { $name$Property.SetValue(value); }	}	#endregion		//绑定页面上的集合（比如商城每一行）	#region Collection $name$	private readonly EZData.Collection<$type$> _private$name$ 									 = new EZData.Collection<$type$>(false);	public EZData.Collection<$type$> $name$ 									{ get { return _private$name$; } }	#endregion}  public class ViewModel : MonoBehaviour{         //NGUI UIRoot 编辑器中手动拖进 	public NguiRootContext View;         //这个代表页面模型 　　	public $game$Ui Context;	void Awake()	{		Context = new $game$Ui();		View.SetContext(Context);	}}

对于上面的模板，如果对其功能有所疑问的话，我建议你看一下NData 的基本教程，其实功能我在代码注释中已经写的很明白了。

这里有一个小插曲，看NData的官方教程是用Mono的类模板来创建，因为本人Win7下开发，装了VS2010, 装了之后却用不了mono了，无语。

三、页面逻辑编写

　　这里我们要实现的页面功能如下：

可以看到，我们这里的商城类似于表格，有多行3列，同时每一个UI部件也有自己属性，设计页面模型如下：

UI部件的页面模型

public class CommodityItem : EZData.Context    {        #region Property ShopId        #endregion        #region Property Name        #endregion        #region Property Price        #endregion        //商品图标         #region Property Logo        #endregion        #region Property Describle        #endregion     }

每行的页面模型

public class CommodityPage
     
       : EZData.Context     where T : EZData.Context{      //列的集合    #region Collection Page    private readonly EZData.Collection
      
        _privatePage = new EZData.Collection
       
        (false);    public EZData.Collection
        
          Page { get { return _privatePage; } }    #endregion}

整体的模型

public class Shop
     
       : EZData.Context     where T : EZData.Context{    //行的集合    #region Collection Table    private readonly EZData.Collection
      
       
        > _privateTable = new EZData.Collection
        
         
          >(false);    public EZData.Collection
          
           
            > Table { get { return _privateTable; } } #endregion}

四、页面模型进行数据填充

一、先设计一个内存数据库，填充每一个UI部件页面模型的数据

　　二、页面模型进行引用填充，填充行列的数据

public class Shop
     
       : EZData.Context     where T : EZData.Context{    //行的集合    #region Collection Table    private readonly EZData.Collection
      
       
        > _privateTable = new EZData.Collection
        
         
          >(false);    public EZData.Collection
          
           
            > Table { get { return _privateTable; } } #endregion //页面模型生成的时候 同时进行数据绑定 public Shop(T[] Array,int PageNum) { Load(Array,PageNum); } //加载数据 void Load(T[] Array, int PageNum) { //总共需要的数量 int AllNum = Array.Length; //每一页需要的数量 int PageCount; //有多少页 if (AllNum == 0) PageCount = 0; else PageCount = ((AllNum % PageNum == 0) ? (AllNum / PageNum) : (AllNum / PageNum + 1)); //总有多少行 for (int i = 0; i < PageCount; i++) { //生成一行 Table.Add(new CommodityPage
            
             ()); //总有多少列 for (int j = 0; j < PageNum && (i * PageNum + j) < AllNum; j++) { 　　 Table.GetItem(i).Page.Add(Array[i * PageNum + j]); } } }}public class UIShopViewModel: MonoBehaviour{ public NguiRootContext View; public Shop
             
               Context; public ShopData myShopDate; void Awake() { Context = new Shop
              
                (myShopDate.CommodityItemArray,3); View.SetContext(Context); }}