如何基于ObservableCollection中元素的IsSelected属性实现带CanExecute的ReactiveCommand

问题根源 #

你的现有代码仅监听Items属性本身的引用变化，只有你给Items重新赋值整个集合时才会触发CanExecute重新计算，不会响应集合内元素的增删、以及单个元素IsSelected属性的变更。

最优解决方案（基于DynamicData） #

ReactiveUI生态默认配合DynamicData处理集合的动态变更，会自动处理元素订阅、内存释放等问题，无需手动管理事件。

操作步骤 #

1. 安装必要NuGet包：DynamicData、DynamicData.Binding（一般ReactiveUI相关项目会默认依赖，没有的话手动安装即可）
2. 引入对应命名空间：

using DynamicData;
using DynamicData.Binding;

3. 构建CanExecute可观察流并创建命令：

// 构建提交按钮可用状态流
var canSubmit = this.WhenAnyValue(x => x.Items)
    // 切换为集合变更的响应式流
    .ToObservableChangeSet()
    // 监听集合中所有元素的IsSelected属性变化，元素移除时自动取消订阅
    .WhenPropertyChanged(x => x.IsSelected, suppressInitialValue: true)
    // 每次变更后重新计算是否存在选中项
    .Select(_ => Items.Any(item => item.IsSelected))
    // 设置初始加载时的按钮状态
    .StartWith(Items?.Any(item => item.IsSelected) ?? false)
    // 避免重复触发相同状态
    .DistinctUntilChanged();

// 创建命令
this.SubmitCommand = ReactiveCommand.CreateFromTask(SubmitItems, canSubmit);

实现说明 #

• ToObservableChangeSet 会将ObservableCollection的增删改事件转换为响应式流
• WhenPropertyChanged 会自动为集合中所有现存元素、后续新增元素订阅IsSelected变更事件，元素被移除时自动销毁订阅，无内存泄漏风险
• Switch 操作符会在你给Items重新赋值整个新集合时，自动切换到新集合的监听流，旧集合的所有订阅自动释放

替代方案（不使用DynamicData，不推荐） #

如果你不想引入DynamicData，可以手动管理集合事件，但需要自行处理订阅释放，容易出现内存泄漏问题：

var canSubmit = new Subject<bool>();
// 初始化状态
canSubmit.OnNext(Items?.Any(x => x.IsSelected) ?? false);

// 监听Items集合引用变化
this.WhenAnyValue(x => x.Items)
    .Subscribe(collection =>
    {
        if (collection == null)
        {
            canSubmit.OnNext(false);
            return;
        }
        // 初始化状态
        canSubmit.OnNext(collection.Any(x => x.IsSelected));
        // 监听集合增删事件
        collection.CollectionChanged += (s, e) =>
        {
            // 给新增元素订阅属性变化
            if (e.NewItems != null)
            {
                foreach (INotifyPropertyChanged item in e.NewItems)
                {
                    item.PropertyChanged += (_, propArgs) =>
                    {
                        if (propArgs.PropertyName == nameof(你的T类名.IsSelected))
                        {
                            canSubmit.OnNext(collection.Any(x => x.IsSelected));
                        }
                    };
                }
            }
            // 移除元素时的订阅释放逻辑此处省略，需要自行实现否则会内存泄漏
            canSubmit.OnNext(collection.Any(x => x.IsSelected));
        };
    });

this.SubmitCommand = ReactiveCommand.CreateFromTask(SubmitItems, canSubmit);

内容的提问来源于stack exchange，提问作者jasonxz