关于Xamarin、Qml、数据绑定、MVC、MVVM 相关的散讲 SURFSKY 2017.02 最近又在学习Xamarin了？为什么是“又”？有几个利好消息，让我重新拾起它： （1）微软去年收购了Xamarin，而且免费。原先的费用会吓死人，而且按人头+平台来收费。 （2）Xamarin.Forms 的出现，UI层也可以复用了，不像原先只能逻辑层代码复用。 （3）IDE增强： Xamarin Forms Previewer，可以直接预览 XAML 的外观。 XAML 智能感应的增强，现在编写XAML舒服多了。原先编写XAML可不是件轻松的事情，所以之前的教材全部都是用C#写的UI，这很不利于视图和逻辑的分离。 Visual Studio for mac 发布，可替代原先的 Xamarin Studio for mac。毕竟，在mac下编写ios/Android app无论性能还是便利性都要比在windows上好得多。 不愧是宇宙最强IDE开发商，一接手Xamarin，编辑器就增强了：） （4）真正的一个语言可以编写跨平台移动app，包括后台、ios、android、windows uwp 等 数据接口和后台：用 asp.net 写即可 移动客户端API：Xamarin 已用C#封装好，如果需要平台专用功能，直接调用即可。 这很利于节省成本、积累技术、简化员工招招聘和培训。 （5）性能 对于ios平台，xamarin是将c#编译成原生的代码。android是嵌入了.NET运行时。 实测试了下，ios下没有任何问题，3秒左右进入主界面，进去后性能就和原生的没有区别了 android的启动略慢，估计要5秒，进去后性能没有问题。 加个欢迎屏可以稍微减缓客户等待的焦虑感。 当然还有缺陷和期望 缺陷 Xamarin.Forms 的控件是转化为各平台原生控件的，也就是说，这些控件在各平台上外观都有区别！ IED 复杂的 XAML previewer展示不出来。 无法拖拽控件快速设计页面。 VS MAC 有时候屏幕刷新不过来，一片白。 经常出现“不是在活动配置中生成的项目”，无法加载项目。 启动速度还是慢了点，位于可容忍的边缘。 没有官方的、统一的移动平台功能 API 库。 类似PhoneGap那样的，访问摄像头、传感器等API，一套代码各平台通用。 现有的这些功能API是分散在各平台自己的库里的，学习一个统一库与学习多平台类库，工作量当然不一样。 早些年有Xamarin.Mobile项目，但与Xamarin.Forms不兼容已经废弃了。 现在这些功能API插件处于散乱琐碎状态，要自己一个个去Xamarin Compoents/GitHub上找。 期望 不知什么时候可以直接拖拽 Xamarin Forms 控件，一个平台也行啊。 加快 Xamarin Form Android app 启动速度。 需要一套外观一致的 Xamarin Forms UI 库，但短期内不会有，要我们直接写了（*） 官方推出统一的跨平台移动功能 API 库：Xamarin.Forms.Mobile（*） 备注 当然 Visual Studio for mac 还是预览版本，等正式版估计BUG会少一些。 （*）打算启动这两个项目，欢迎有共同志向的同学参与。 相比较 Qt 性能还是Qt占优的，毕竟底层是C++写的。但Xamarin的性能也在可容忍范围内，主要是启动时间稍慢了点。 APP 大小。 都在20M以上， Qt V-Play apps 基于Qt的游戏引擎 52.4M 新发布的 Qt 5.8据说可以裁剪库的大小，将APP压缩到4、5M内 Xamarin 我也搞不清楚了。 Xuni Explorer 只有 5.6 M Evlove 16 有46.1M 随便编译个debug版本的，估计有60多M，release的还没试验 虽然说理论上 Qml 可以摆平一切界面问题，但我们不可避免的要涉及到各平台的插件，那么你真正需要学习的语言有： QML : Javascript : C++ : Qt类库 Object-C : Android : ps.真希望Qml能发展成独立的开发语言（参照 swift） 强类型 可编译 简化创建组件语法，直接用new MyItem()，而不是复杂的Qt.CreateComponent..... 摒弃js、v4引擎，提供工具将js迁移为标准Qml 独立发展 Qml 类库 更便利的方式访问c++类库，类似swift那样，只需Import即可使用 绑定的前世今生 若要监控一个对象的若干属性变化情况，传统写法是为每个要监控的属性加上一个值变更事件，然后让调用者添加这个事件 public event Event FirstNameChanged; public string FirstName {get; set;} sample.FirstNameChanged += (o, value)=>txtbox.Text = value; 这样很可能要写很多的属性变更事件，而且不能自动给订购者赋值 什么是绑定？它事实上做了两件事 （1）监听对象指定属性，若变化，则通知给订购者 （2）给订购者赋值 微软给出的官方方案是 （1）绑定系统维护了一个表格（在绑定表达式中指定），字段大致包括： object SourceObject : 监听对象 string SourcePropertyName : 监听对象的属性名称 object TargetObject : 订购者 string ValuePath : 赋值路径 （2）让数据实现INotifyPropertyChanged接口 public event PropertyChangedEventHandler PropertyChanged; 若监听对象的属性有变动，则触发这个事件，通知绑定系统 这个事件的参数中包含了监听对象和变更的属性名称（SourceObject + SourcePropertyName） （3）绑定系统去查表，给订购者进行赋值 TargetObject = SourceObject.SourcePropertyName.ValuePath 属性变更通知 INotifyPropertyChanged接口（属性变更的时候通知下绑定系统，我的哪个属性变更了，快处理啊） class Sample : INotifyPropertyChanged { // INotifyPropertyChanged 接口成员 public event PropertyChangedEventHandler PropertyChanged; // 属性 private string firstName; public string FirstName { get { return firstName; } set { firstName = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("FirstName")); } } } // 绑定(textBox.Text <= sourceObject.FirstName) Sample sourceObject = new Sample(); textbox.DataBindings.Add("Text", sourceObject, "FirstName"); sourceObject.FirstName = "Stack"; 我们做一下封装，加上值相等判断。 定义 ViewModelBase using System; using System.ComponentModel; using System.Runtime.CompilerServices; namespace Xamarin.FormsBook.Toolkit { public class ViewModelBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, string propertyName = null) { if (Object.Equals(storage, value)) return false; storage = value; if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); return true; } } } 让数据模型类继承自ViewModelBase public class InformationViewModel : ViewModelBase { string name; public string Name { get { return name; } set { if (SetProperty(ref name, value, "Name")) { ...属性已经更新，该干点啥 }; } } } Xamarin 的方案（使用 BindableObject) 代码 public RadioButtonGroup : BindableObject { public static readonly BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(Radio), "", propertyChanged: TextChanged); private static void TextChanged(BindableObject bindable, object oldValue, object newValue) { var radio = (Radio)bindable; radio.Lbl.Text = (string)newValue; } public string Text { get {return (string)this.GetValue(TextProperty);} set {this.SetValue(TextProperty, value);} } } this.Icon.SetBinding(Image.IsVisibleProperty, new Binding("ShowRadio", source: this)); 说明 这里的BindableProperty是用于描述这个属性的元信息，如名称、类型、默认值、绑定方向、属性值变更事件 BindableObject 是 INotifyPropertyChanged 的封装，增加了绑定上下文、属性变更中、属性变更完毕事件等逻辑 public abstract class BindableObject : INotifyPropertyChanged, IDynamicResourceHandler { public static readonly BindableProperty BindingContextProperty; public object BindingContext { get; set; } protected BindableObject (); // Methods protected void ApplyBindings (object oldContext = null); public void ClearValue (BindableProperty property); public void ClearValue (BindablePropertyKey propertyKey); public object GetValue (BindableProperty property); protected virtual void OnBindingContextChanged (); protected virtual void OnPropertyChanged ([CallerMemberName] string propertyName = null); protected virtual void OnPropertyChanging ([CallerMemberName] string propertyName = null); public void RemoveBinding (BindableProperty property); public void SetBinding (BindableProperty targetProperty, BindingBase binding); public void SetValue (BindablePropertyKey propertyKey, object value); public void SetValue (BindableProperty property, object value); protected void UnapplyBindings (); // Events public event EventHandler BindingContextChanged { add; remove;} public event PropertyChangedEventHandler PropertyChanged {add; remove;} public event PropertyChangingEventHandler PropertyChanging {add; remove;} } 单向数据绑定和双向数据绑定 单向：model的变更会刷新view，view上做任何操作都不影响model 双向：model的变更会刷新view，view的变更会刷新model 个人只喜欢用单向的，理由呢： 喜欢实打实的代码来控制数据刷新，双向的数据绑定总觉得不放心 view的交互，常常带了逻辑控制，不仅仅是给model赋值，这不是双向数据绑定能解决的。 其它 Qt QML的属性、绑定、属性变更事件实现起来非常优美和简单 A { property int Property1; // 编译器会自动生成类似以下方法 // bool onProperty1Changing(o, oldValue, newValue){...} // void onProperty1Changed(o, oldValue, newValue) {....} } b.Property2 = a.Property1; // 绑定这两个对象的属性（单向绑定） 建议 C# 优化编译器，或者提供语法糖之类的东西（如propety关键字） public readonly property string Name; 编译器自动实现： getter、setter INotifyPropertyChanged 接口 PropertyChangingEvent PropertyChangedEvent 绑定逻辑 事实上，这个功能10来年前的 Delphi 就实现了 什么是 MVC 这是将界面、逻辑、数据隔离的一种方案，这其实也是绑定的一种实现，不过是页面级别的。 Model : 数据 View : 视图 Controller : 控制器 视图的呈现由控制器控制，视图的数据（模型）也由控制器提供 TODO: 补一个简单的示例 ASP.NET MVC 是一个controller对应多个view 它的controller主要就是个跳转器，根据客户端请求，组装数据并提供给某个视图，渲染到客户端 疑问： 大的页面用controller跳转好理解 但小的交互，如按钮点击页面上的某个label变个文字，这个也交给controll是不是太琐碎了？ 这个还是交给页面客户端自己处理会更合适，但这要写js了 其实传统的 Windows Form 也可以看为一种MVC View部分可由设计器创建 View的数据展示、交互（如点击事件）在后台代码中，这个可以看成Controller 不过这种方式是一个view对应一个controller，这个controller是这个view专用的 ios-objectc 的MVC 这货和 Windows Form 差不多，也是一个视图对应一个专用的控制器 挂MVC的头衔，行Windows Form的行当。 什么是 MVVM 这是将界面和数据完全隔离的一种方案 Model : 模型 View : 视图 ViewModel : 视图模型 传统的页面数据展示，可以是混杂的，既有数据绑定，也可以掺杂代码指定。如： TODO：来段 MVVM 的示例代码 可以看出，MVVM是一种更极端的、界面和数据完全隔离的方案： 它定义了一个叫 ViewModel 的东西，这个也是一种Model，但专用于视图 视图的赋值只能用 ViewModel，不能用其它方式 我们必须为每个 View 定制一个 ViewModel。 评价 好处：完全隔离视图和数据、只要约定好数据接口（ViewModel）就行 坏处：必须为每个视图都定制 ViewModel，这会增加代码量 ps 2017-05 出了个 Xamarin Live Player 的东东，可以在手机上展示程序运行效果 android版本的可以直接下载，ios版本的还在testflight中 https://docs.microsoft.com/zh-cn/xamarin/tools/live-player/