Reactive UI — 反应式编程UI框架入门学习（二）

技术分享 2年前 (2022-08-10) 0 999+

关注

前文Reactive UI -- 反应式编程UI框架入门学习（一）介绍了反应式编程的概念和跨平台ReactiveUI框架的简单应用。

本文通过一个简单的小应用更进一步学习ReactiveUI框架的使用和整体布局，并对比与MVVMLight的不同之处。

应用的功能很简单，读取本地计算机的所有盘符，并通过选定盘符展示该盘符下的所有文件夹的名称和创建时间。

首先新建一个工程，本文使用的是.Net6.0，并添加两个Nuget包：ReactiveUI.WPF,ReactiveUI.Fody。

ReactiveUI.WPF是框架的核心代码包，而ReactiveUI.Fody是一个扩展包，像[Reactive]这样的标记就是在这个包中定义的。

绑定ViewModel

在MVVMLight框架中，View绑定ViewModel需要通过DataContext来绑定在Locator中定义的ViewModel，而在ReactiveUI框架中，则是通过继承泛型窗口类ReactiveWindow或者泛型用户控件类ReactiveUserControl来自动绑定ViewModel。

<reactiveui:ReactiveWindow  x:TypeArguments="local:MainWindowViewModel"         x:Class="Calculateor.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:Calculateor"         xmlns:reactiveui="http://reactiveui.net"         mc:Ignorable="d"         Title="MainWindow" Height="300" Width="500">     <Grid Margin="10">         <Grid.RowDefinitions>             <RowDefinition Height="20"/>             <RowDefinition Height="*"/>         </Grid.RowDefinitions>         <ComboBox Name="cmbDisks">             <ComboBox.ItemTemplate>                 <DataTemplate>                     <TextBlock Text="{Binding }"/>                 </DataTemplate>             </ComboBox.ItemTemplate>         </ComboBox>         <ListBox Grid.Row="1" x:Name="lbFolders"></ListBox>     </Grid> </reactiveui:ReactiveWindow>

注意以上Xaml代码中没有出现DataContext。

CS文件中强绑定：

public partial class MainWindow : ReactiveWindow<MainWindowViewModel>     {         public MainWindow()         {             InitializeComponent();              ViewModel = new MainWindowViewModel();             this.WhenActivated(dispos => {                  this.OneWayBind(ViewModel, vm=>vm.Disks, vw=>vw.cmbDisks.ItemsSource)                 .DisposeWith(dispos);                  this.Bind(ViewModel, vm => vm.SelectedDisk, vw => vw.cmbDisks.SelectedItem)                 .DisposeWith(dispos);                  this.OneWayBind(ViewModel,vm=>vm.FolderModels, vw=>vw.lbFolders.ItemsSource)                 .DisposeWith(dispos);             });                      }     }

View通过继承指定为MainWindowViewModel类型的ReactiveWindow，便建立了View和ViewModel之间的关联，而不需要额外的指定DataContext去绑定。

界面顶部是一个下拉框，用于显示盘符信息，ItemSource绑定了ReadOnlyObservableCollection<string>类型对象。

    private readonly ReadOnlyObservableCollection<string> _disks;         public ReadOnlyObservableCollection<string> Disks => _disks;

其选中的盘符则绑定到了一个string类型的属性上。注意Reactive标记

  [Reactive]   public string SelectedDisk { get; set; }

接着用一个ListBox展示具体的文件夹信息，定义一个FolderModel类型的类来约定需要展示的信息。

public class FolderModel     {         public string FolderName { get; set; }         public DateTime CreateTime { get; set; }      }

ItemSoruce绑定到一个IEnumerable<FolderModel> FolderModels类型上

        private readonly ObservableAsPropertyHelper<IEnumerable<FolderModel>> _folderModels;         public IEnumerable<FolderModel> FolderModels => _folderModels.Value;

而 ObservableAsPropertyHelper<IEnumerable<FolderModel>> _folderModels则是用来与SelectedDisk建立观察者模式的联系，每次SelectDisk的值改变时，就会触发方法LoadFolderInfoWithSelectedDiskChanged，并将返回结果赋值到FolderModels对象，最终传导到UI上。

   _folderModels = this.WhenAnyValue(s => s.SelectedDisk)                 .Where(s => !string.IsNullOrWhiteSpace(s))                 .SelectMany(LoadFolderInfoWithSelectedDiskChanged)                 .ObserveOn(RxApp.MainThreadScheduler)//线程调度，后续的代码会在主线程上调用                 .ToProperty(this, nameof(FolderModels));

这里的WhenAnyValue是构建函数声明的核心API，一般都是与ReactiveUI框架扩展的Linq方法搭配使用，前文有过简单的介绍。

在MVVMLight框架中，ViewModel继承的是ViewModelBase/ObservableObject，而在ReactiveUI框架中，ViewModel继承的是ReactiveObject

以下为完整的MainWindowViewModel文件：

public class MainWindowViewModel : ReactiveObject     {         public MainWindowViewModel()         {             DisksSource = new();             DisksSource.ToObservableChangeSet()                 .Bind(out _disks)                 .Subscribe();              _folderModels = this.WhenAnyValue(s => s.SelectedDisk)                 .Where(s => !string.IsNullOrWhiteSpace(s))                 .SelectMany(LoadFolderInfoWithSelectedDiskChanged)                 .ObserveOn(RxApp.MainThreadScheduler)                 .ToProperty(this, nameof(FolderModels));              Task _ = LoadDisksIqLocal();         }         private readonly ReadOnlyObservableCollection<string> _disks;         public ReadOnlyObservableCollection<string> Disks => _disks;          public ObservableCollectionExtended<string> DisksSource{get;private set;}          private readonly ObservableAsPropertyHelper<IEnumerable<FolderModel>> _folderModels;         public IEnumerable<FolderModel> FolderModels => _folderModels.Value;          [Reactive]         public string SelectedDisk { get; set; }

       //通过WMI读取本地计算机的所有磁盘的盘符         private async Task LoadDisksIqLocal()         {             await Task.Run(() => {                  ManagementObjectSearcher query = new("SELECT  *  From  Win32_LogicalDisk");                 var queryCollection = query.Get();                  foreach (var item in queryCollection)                 {                     var diriveType = (DriveType)int.Parse(item["DriveType"].ToString());                     if (diriveType == DriveType.Fixed)                     {                         var diskID = item["DeviceID"].ToString();                         DisksSource.Add(diskID);                     }                 }             });         }          private async Task<IEnumerable<FolderModel>> LoadFolderInfoWithSelectedDiskChanged(string diskName)         {             List<FolderModel> folderModels = new List<FolderModel>();             await Task.Run(() => {                 var files = Directory.GetDirectories(diskName);                 foreach (var fileName in files)                 {                     FolderModel folderModel = new FolderModel();                     DirectoryInfo directoryInfo = new DirectoryInfo(fileName);                     folderModel.FolderName = directoryInfo.Name;                     folderModel.CreateTime = directoryInfo.CreationTime;                     folderModels.Add(folderModel);                 }             });             return folderModels;         }     }

下面需要定义ListBox信息需要以怎样的格式来展示。一般的常规做法是通过Style来定制控件的模板展示定制化的数据格式，而在ReactiveUI框架中，还有其他的选择。

在ReactiveUI中，会根据ListBox ItemSource所绑定的集合类型来自动的搜索这个类型所关联的UserControl来作为ListBox的模板。

简单的说，只需要给上文中的FolderModel指定一个UserControl即可，而不需要额外的指定Style或者Template。

所以View中的ListBox代码很简单：

<ListBox Grid.Row="1" x:Name="lbFolders"></ListBox>

新增一个UserControl的类FolderInfoUC.xaml与FolderModel绑定：

<reactiveui:ReactiveUserControl x:Class="Calculateor.FolderInfoUC"                                 x:TypeArguments="local:FolderModel"              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"               xmlns:local="clr-namespace:Calculateor"               xmlns:reactiveui="http://reactiveui.net"              mc:Ignorable="d"               d:DesignHeight="450" d:DesignWidth="800">     <UniformGrid Columns="2">         <TextBlock Text="{Binding FolderName}" HorizontalAlignment="Left"/>          <TextBlock Text="{Binding CreateTime}" HorizontalAlignment="Right"/>     </UniformGrid> </reactiveui:ReactiveUserControl>

这里的TextBlock控件除了展示数据之外没有其他用途，所以直接使用了Xaml的绑定方式，而View通过ReactiveUserControl来指定他的ViewModel类型为FolderModel，这样就建立了FolderModel和FolderInfoUC之间的联系。

当然，在很多情况下处理复杂的高度自定义的数据展示时，还是需要Style的配合。

需要注意的是，这里的FolderModel数据类型本身比较简单，不需要继承自ReactiveObject。

还有一个情况需要注意，如主界面上的下拉框Combobox。这个控件绑定的是一个简单的string类型的集合 ReadOnlyObservableCollection<string>，不推荐为CLR中的基础类型关联UserControl，所以需要Xaml中指定ItemTemplate，否则无法显示数据。

总结

截至本文，ReactiveUI相比于MVVMLight框架，有以下的不同点：

1.ReactiveUI推荐强绑定，并提供了管理ViewModel和属性的生命周期的方法。

2.易于构建响应式的可观察的函数声明式的数据流处理。

3.简化了ViewModel和View之间绑定的操作方式，并强化了两者之间的联系贯穿在整个应用的生命周期中。

4.扩展了动态数据集合在多线程下的操作，提供线程安全的可绑定动态集合。

本文以一个小应用简单介绍了ReactiveUI整体框架的使用，其中一些核心的API WhenAnyValue、ObservableAsPropertyHelper、ObservableCollectionExtended等没有详细展开，后续会对这些API的高级应用有更深入的学习和了解，学习和阅读ReactiveUI的源码。

git地址：https://github.com/reactiveui/reactiveui

官网地址：https://www.reactiveui.net/