首页 > 其他分享 >【Unity】 HTFramework框架(三十九)UI的数据驱动模式,MVVM

【Unity】 HTFramework框架(三十九)UI的数据驱动模式,MVVM

时间:2022-12-13 15:05:09浏览次数:73  
标签:MVVM 绑定 UIDBUserModel Unity UI DataBinding public 数据模型


更新日期:2020年10月24日。
Github源码:​​​[点我获取源码]​​​ Gitee源码:​​[点我获取源码]​

索引

  • ​​UI的数据驱动模式​​
  • ​​使用​​
  • ​​数据模型​​
  • ​​BindableType可绑定数据类型​​
  • ​​IDataDriver数据驱动器​​
  • ​​DataBinding双向绑定​​
  • ​​BindableSelectable特殊数据类型​​

UI的数据驱动模式

​MVVM​​​的基础特性是​​数据绑定​​​,也可以在某种程度上称之为数据驱动,在最新版本中,框架的​​UI模块​​(当然还有实体模块、公共行为类、FSM模块等)支持​​数据驱动模式​​​,所谓的数据驱动模式也即是​​UGUI控件​​​与​​数据模型​​​的​​双向绑定​​(这里不考虑单向绑定)。

双向绑定后,支持如下特性:

  • 在代码中任意位置更新​​数据模型​​​的值,与其绑定的所有​​UGUI控件​​会自动更新显示(支持多个控件绑定至同一个数据);
  • 在代码中或手动修改了​​UGUI控件​​​的显示值,与其绑定的​​数据模型​​值也会跟着同步更新。

使用

数据模型

1.新建数据模型:新建一个脚本,并继承至​​DataModelBase​​:

/// <summary>
/// UI数据驱动测试模型
/// </summary>
public class UIDBUserModel : DataModelBase
{

}

2.填入数据:在数据模型中最好使用​​可绑定数据​​,好处是可以与UI控件进行绑定:

/// <summary>
/// UI数据驱动测试模型
/// </summary>
public class UIDBUserModel : DataModelBase
{
/// <summary>
/// 姓名
/// </summary>
public BindableString Name = new BindableString();
/// <summary>
/// 年龄
/// </summary>
public BindableInt Age = new BindableInt();
/// <summary>
/// 力量
/// </summary>
public BindableFloat Power = new BindableFloat();
/// <summary>
/// 是否是神级角色
/// </summary>
public BindableBool IsGod = new BindableBool();
/// <summary>
/// 种族
/// </summary>
public BindableSelectable Race = new BindableSelectable(new string[] { "人族", "魔族", "神族", "龙族" });
}

3.在环境中加载数据模型:在Main检视面板上的​​DataModel​​​分栏,将刚才创建的数据模型加载进去,这样才能确保当前环境中存在该数据模型,且其在整个环境中是​​唯一​​的:

【Unity】 HTFramework框架(三十九)UI的数据驱动模式,MVVM_UI

BindableType可绑定数据类型

在数据模型​​UIDBUserModel​​​中,必须要使用​​可绑定数据类型​​​来定义数据字段,才能绑定到相应的控件,比如我要定义一个​​string​​​类型的数据,就必须使用对应的可绑定数据类型​​BindableString​​:

/// <summary>
/// UI数据驱动测试模型
/// </summary>
public class UIDBUserModel : DataModelBase
{
/// <summary>
/// 姓名
/// </summary>
public BindableString Name = new BindableString();
}

常用的基础类型均有与其对应的可绑定类型,当然也支持​​自定义可绑定类型​​。

IDataDriver数据驱动器

将任何一个普通的UI逻辑类转变为数据驱动模式,只需要使其实现接口​​IDataDriver​​就可以了:

/// <summary>
/// 数据驱动测试UI,实现接口IDataDriver后,此UI便成为数据驱动器
/// </summary>
public class UIDBTestPanel : UILogicResident, IDataDriver
{
//注意:必须启用自动化任务
protected override bool IsAutomate => true;

//other code......
}

DataBinding双向绑定

然后便可以直接将指定的​​UGUI控件​​​绑定至​​数据模型​​​(支持多个控件绑定同一个数据),使用​​DataBinding​​​特性标记即可,比如此处将​​_inputFieldName​​​和​​_textName​​​绑定至数据​​Name​​:

public class UIDBTestPanel : UILogicResident, IDataDriver
{
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Name")] private InputField _inputFieldName;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Name")] private Text _textName;
}

绑定完成后数据​​Name​​​的值将始终与控件​​_inputFieldName​​​和​​_textName​​的显示值保持同步:

  • 在代码中修改了​​Name​​的值后,UI界面会实时更新;
  • UI界面更改了数据值后,​​Name​​​的值也会实时同步。

    定义更多的绑定控件:
public class UIDBTestPanel : UILogicResident, IDataDriver
{
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Name")] private InputField _inputFieldName;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Name")] private Text _textName;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Age")] private InputField _inputFieldAge;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Age")] private Text _textAge;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Power")] private Slider _sliderPower;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Power")] private Text _textPower;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "IsGod")] private Toggle _toggleIsGod;
[DataBinding("HT.Framework.Demo.UIDBUserModel", "IsGod")] private Button _buttonIsGod;
}

UI界面如下,直接在界面上修改UI控件,便可以修改对应的数据值:

【Unity】 HTFramework框架(三十九)UI的数据驱动模式,MVVM_UI_02

BindableSelectable特殊数据类型

​BindableSelectable​​​为可选数据类型,支持传入多个可选值,然后数据的真实值为多个可选值之一,此数据模型可以与​​DropDown​​控件进行绑定:

public class UIDBTestPanel : UILogicResident, IDataDriver
{
[DataBinding("HT.Framework.Demo.UIDBUserModel", "Race")] private Dropdown _dropdownRace;
}

public class UIDBUserModel : DataModelBase
{
/// <summary>
/// 种族
/// </summary>
public BindableSelectable Race = new BindableSelectable(new string[] { "人族", "魔族", "神族", "龙族" }, 2);
}

UI界面如下:

【Unity】 HTFramework框架(三十九)UI的数据驱动模式,MVVM_双向绑定_03


标签:MVVM,绑定,UIDBUserModel,Unity,UI,DataBinding,public,数据模型
From: https://blog.51cto.com/u_15911199/5934141

相关文章

  • Unity UGUI无限列表(Infinite List)
    更新日期:2020年10月16日。Github源码:​​​[点我获取源码]​​索引​​InfiniteList​​​​使用​​​​创建InfiniteListScrollRect​​​​InfiniteListScrollRect参数......
  • Unity - 粒子系统跟随路径移动
    对于最新版的粒子系统ParticleSystem,要让其跟随路径移动,无非就是借用其自身的API直接为每个粒子设置速度。看一下最终的效果图:编辑器为了能在场景中更方便的编辑路径,我们要......
  • 【Unity】 HTFramework框架(三十七)Inspector自定义序列化检视器
    更新日期:2020年8月21日。Github源码:​​​[点我获取源码]​​​Gitee源码:​​[点我获取源码]​​索引​​Inspector自定义序列化检视器​​​​使用​​​​Dropdown下拉......
  • 【Unity】 HTFramework框架(三十六)AssetsMaster资源管理器,做资产的主人
    更新日期:2020年8月13日。Github源码:​​​[点我获取源码]​​​Gitee源码:​​[点我获取源码]​​索引​​AssetsMaster​​​​使用AssetsMaster​​​​打开AssetsMaster......
  • Unity 多物体混合动画、值变动画控制器
    索引​​前言​​​​示例​​​​1、4个Cube的联动动画​​​​2、UGUIText文本动画​​​​3、UGUIImage图片动画​​​​4、物体消隐动画​​​​使用与解析​​​​1......
  • Unity实现在白板上绘画涂鸦
    前言有段时间没有更新博客了,不知道应该写些什么,太简单感觉没有记录的必要,太难自己都没能理解,不知道如何下手。回归初心,记录自己想记录的东西。需要实现一个白板绘画的功能,......
  • Unity 使用拖尾渲染器模拟简易的管道流体
    关于管道流体关于管道流体,最佳的解决方案肯定是UV动画无疑,在网上看过很多例子几乎都是这样的,毕竟用实时流体计算的话开销确实太大,用粒子系统的话又苦于难以表现出流体的粘稠......
  • Unity UGUI图文混排源码(三) -- 动态表情
    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章1.首先来一个好消息,在最新版本的图文混排中,终于......
  • Unity 简易的UI背景昼夜轮替效果
    在UI背景上实现一个简易的有光影照射的昼夜轮替效果,往往比一个死板的UI背景看起来更加形象生动,比较传统的方式是多图轮流替换的序列帧动画,不过要达到整个UI背景大图的所有地......
  • 自助取数、即席分析...瓴羊Quick BI助力企业数字化转型
    数据时代下,无论企业体量如何,在企业经营管理过程中都会产生海量数据,这些数据对企业发展而言是难得的资产,需要充分挖掘数据价值,助力企业经营决策,推动企业实现持续发展。部分企......