更新日期: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
分栏,将刚才创建的数据模型加载进去,这样才能确保当前环境中存在该数据模型,且其在整个环境中是唯一
的:
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控件,便可以修改对应的数据值:
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界面如下: