MVVM框架在unity开发中的使用

1、什么是MVVM

借用一下百度百科上对MVVM的介绍，MVVM是Model-View-ViewModel的简写，它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

 

2、MVVM在unity开发中的应用

MVVM框架应用面十分广泛，通常在前端开发中应用很广，最近看到周围同事在开发WPF时用到了这个框架，抱着好奇的态度来学习一下这个框架，MVVM框架在unity开发中同样适用，在unity中，将每个UI抽象成一个个View，通常我们为每一个UI面板定义一个View，View中包含了该面板中涉及到的UI元素，比如一个Text,一个Button；每一个View都有独立的ViewModel来管理，ViewModel中提供必要的属性和方法来控制View， 而Model只是单纯的定义一个数据模型。前两天在github上发现了这个叫uMVVM的框架，拿来试用了一下，下面分析一下该框架对MVVM模式的设计。

 

3、uMVVM的设计与实现

下载uMVVM后，它提供了一些使用示例：

在这个示例中，有两个panel，就定义了两个view，每个view中定义该界面的元素，比如SetupView：

public class SetupView:UnityGuiView<SetupViewModel>
    {

        public InputField nameInputField;
        public Text nameMessageText;

        public InputField jobInputField;
        public Text jobMessageText;

        public InputField atkInputField;
        public Text atkMessageText;

        public Slider successRateSlider;
        public Text successRateMessageText;

        public Toggle joinToggle;
        public Button joinInButton;
        public Button waitButton;
        
        public SetupViewModel ViewModel { get { return (SetupViewModel)BindingContext; } }

        }

可以看到，View中需要指定对应的ViewModel来管理该View，ViewModel中定义的属性需要具备当数据改变时通知订阅者的功能，因此uMVVM对这种属性进行了一层封装，具体设计如下：

public class BindableProperty<T>
    {
        public delegate void ValueChangedHandler(T oldValue, T newValue);

        public ValueChangedHandler OnValueChanged;

        private T _value;
        public T Value
        {
            get
            {
                return _value;
            }
            set
            {
                if (!Equals(_value, value))
                {
                    T old = _value;
                    _value = value;
                    ValueChanged(old, _value);
                }
            }
        }

        private void ValueChanged(T oldValue, T newValue)
        {
            if (OnValueChanged != null)
            {
                OnValueChanged(oldValue, newValue);
            }
        }

        public override string ToString()
        {
            return (Value != null ? Value.ToString() : "null");
        }
    }

可以看到，BindableProperty类中维护一个T类型数据，当T发生变化时，可以通知到订阅者，有了这种属性之后，那么ViewModel就是这样的了：

public class SetupViewModel:ViewModelBase
    {
        public readonly BindableProperty<string> Name = new BindableProperty<string>();
        public readonly BindableProperty<string> Job=new BindableProperty<string>(); 
        public readonly BindableProperty<int> ATK = new BindableProperty<int>();
        public readonly BindableProperty<float> SuccessRate=new BindableProperty<float>(); 
        public readonly BindableProperty<State> State=new BindableProperty<State>();
}

uMVVM的设计中，每个View都继承UnityGuiView这个泛型类，UnityGuiView大概的内容是这样：

public abstract class UnityGuiView<T>:MonoBehaviour,IView<T> where T:ViewModelBase
    {
        private bool _isInitialized;
        public bool destroyOnHide;
        protected readonly PropertyBinder<T> Binder=new PropertyBinder<T>();
        public readonly BindableProperty<T> ViewModelProperty = new BindableProperty<T>();
 
        public T BindingContext
        {
            get { return ViewModelProperty.Value; }
            set
            {
                if (!_isInitialized)
                {
                    OnInitialize();
                    _isInitialized = true;
                }
                //触发OnValueChanged事件
                ViewModelProperty.Value = value;
            }
        }

        /// <summary>
        /// 初始化View，当BindingContext改变时执行
        /// </summary>
        protected virtual void OnInitialize()
        {
            //无所ViewModel的Value怎样变化，只对OnValueChanged事件监听(绑定)一次
            ViewModelProperty.OnValueChanged += OnBindingContextChanged;
        }
        
        /// <summary>
        /// 当gameObject将被销毁时，这个方法被调用
        /// </summary>
        public virtual void OnDestroy()
        {
            if (BindingContext.IsRevealed)
            {
                Hide(true);
            }
            BindingContext.OnDestory();
            BindingContext = null;
            ViewModelProperty.OnValueChanged = null;
        }

        /// <summary>
        /// 绑定的上下文发生改变时的响应方法
        /// 利用反射+=/-=OnValuePropertyChanged
        /// </summary>
        public virtual void OnBindingContextChanged(T oldValue, T newValue)
        {
            Binder.Unbind(oldValue);
            Binder.Bind(newValue);
        }
    }

UnityGuiView中有一个BindingContext的属性， 当使用框架时，需要给View的BindingContext指定对应的ViewModel：

  public class Install:MonoBehaviour
    {
        // Use this for initialization
        public SetupView setupView;
        public TestView testView;
        void Start()
        {
            //绑定上下文
            setupView.BindingContext=new SetupViewModel();
            testView.BindingContext=new TestViewModel();
        }
    }

在View中，就订阅model数据改变的消息，并定义相应的响应函数：

 public class SetupView:UnityGuiView<SetupViewModel>
    {
        //......省略ui元素的定义
        
        protected override void OnInitialize()
        {
            base.OnInitialize();
            Binder.Add<string>("Name", OnNamePropertyValueChanged);
            Binder.Add<string>("Job",OnJobPropertyValueChanged);
            Binder.Add<int>("ATK",OnATKPropertyValueChanged);
            Binder.Add<float>("SuccessRate",OnSuccessRatePropertyValueChanged);
            Binder.Add<State>("State",OnStatePropertyValueChanged);
        }


        private void OnSuccessRatePropertyValueChanged(float oldValue, float newValue)
        {
            successRateMessageText.text = newValue.ToString("F2");
        }

        private void OnATKPropertyValueChanged(int oldValue, int newValue)
        {
            atkMessageText.text = newValue.ToString();
        }

        private void OnJobPropertyValueChanged(string oldValue, string newValue)
        {
            jobMessageText.text = newValue.ToString();
        }

        private void OnNamePropertyValueChanged(string oldValue, string newValue)
        {
            nameMessageText.text = newValue.ToString();
        }
        private void OnStatePropertyValueChanged(State oldValue, State newValue)
        {
           //dosomething
        }

最后看一下其中一个model的定义：

 public class Combatant
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Job { get; set; }
        public float SuccessRate { get; set; }
        public State State { get; set; }
    }
    public enum State
    {
        JoinIn,
        Wait
    }

 

4、总结

本文只大概写了一下uMVVM框架的一些设计和使用方法，不全面，如果感兴趣，可以自行阅读源码，github地址为https://github.com/MEyes/uMVVM

 

如有错误，欢迎指正！