如何使用 ReactiveUI 实现倒数计时器？

Question

我是反应式世界的新手，我仍在努力学习。为了练习，我决定编写一个非常简单的 WPF 倒数计时器应用程序。基本上，这就是我想要做的：

有一个显示当前剩余时间的 TextBlock。
单击按钮启动计时器。
当计时器为运行时，应禁用按钮。

我正在尝试使用 ReactiveUI 来实现它。以下是我目前所拥有的...

XAML:

<Window x:Class="ReactiveTimer.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:ReactiveTimer"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock FontSize="45" FontWeight="Bold">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}{0:00}:{1:00}">
                <Binding Path="RemainingTime.Minutes"/>
                <Binding Path="RemainingTime.Seconds"/>
            </MultiBinding>
        </TextBlock.Text>
    </TextBlock>

    <Button Command="{Binding StartCommand}" Content="Start" Grid.Row="1"/>
</Grid>

视图模型：

public interface IMainViewModel
{
    TimeSpan RemainingTime { get; }
    ICommand StartCommand { get; }
}

public class MainViewModel : ReactiveObject, IMainViewModel
{
    const double InitialTimeInSeconds = 10;
    private TimeSpan _remainingTime;
    private ReactiveCommand<object> _startCommand;

    public TimeSpan RemainingTime
    {
        get { return _remainingTime; }
        private set { this.RaiseAndSetIfChanged(ref _remainingTime, value); }
    }

    public ICommand StartCommand => _startCommand;

    public MainViewModel()
    {
        _startCommand = ReactiveCommand.Create();
        _startCommand.Subscribe(_ => Start());
    }

    private void Reset()
    {
        RemainingTime = TimeSpan.FromSeconds(InitialTimeInSeconds);
    }

    private void Start()
    {
        RemainingTime = TimeSpan.FromSeconds(InitialTimeInSeconds);
        var timerStream = Observable.Interval(TimeSpan.FromSeconds(1))
            .TakeWhile(_ => RemainingTime > TimeSpan.Zero)
            .Subscribe(_ => RemainingTime = RemainingTime.Subtract(TimeSpan.FromSeconds(1)));
    }
}

我的问题是：

我对 timerStream 的实现是否正确？
如何在计时器运行时禁用“开始”按钮，并在计时器停止时重新启用它？

Answer 1

我可以通过进行以下更改来实现此功能：

添加了一个 vm.IsRunning 标志，在 Start() 时设置为 true，并在 时设置回 false timerStream 已完成。
在 IsRunning 属性上使用了 ReactiveObject.WhenAny(...) 和将其用作 ReactiveCommand 的 canExecute observable.
我还更新了 timerStream 可观察对象的实现。为了使计时器更准确，我对其进行了更新，使其在开始时捕获 DateTime.Now，然后每当 Observable.Interval 产生一个值，我再次得到 DateTime.Now 并从中减去原来的值以获得经过的时间。

这是我更新的 ViewModel 实现

public class MainViewModel : ReactiveObject, IMainViewModel
{
    const double InitialTimeInSeconds = 5;
    private TimeSpan _remainingTime;
    private ReactiveCommand<object> _startCommand;
    private bool _isRunning = false;

    public TimeSpan RemainingTime
    {
        get { return _remainingTime; }
        private set { this.RaiseAndSetIfChanged(ref _remainingTime, value); }
    }

    public ICommand StartCommand => this._startCommand;

    public bool IsRunning
    {
        get { return this._isRunning; }
        set { this.RaiseAndSetIfChanged(ref _isRunning, value); }
    }

    public MainViewModel()
    {
        var canStart = this.WhenAny(x => x.IsRunning, propChanged => !propChanged.Value);
        _startCommand = ReactiveCommand.Create(canStart);
        _startCommand.Subscribe(_ => Start());
    }

    private void Start()
    {
        IsRunning = true;
        var remaining = TimeSpan.FromSeconds(InitialTimeInSeconds);
        var startTime = DateTime.Now;
        var timerStream = Observable
            .Interval(TimeSpan.FromMilliseconds(1))
            .Select(_ => remaining.Subtract(DateTime.Now.Subtract(startTime)))
            .TakeWhile(x => x > TimeSpan.Zero)
            .ObserveOnDispatcher()
            .Subscribe(
                onNext: x => RemainingTime = x, 
                onCompleted: () =>
                {
                    this.RemainingTime = TimeSpan.Zero;
                    this.IsRunning = false;
                });
    }
}

注意： 最初，我没有在 timerStream 上使用 ObserveOnDispatcher() 和运行进入一个问题即使在可观察对象完成后，按钮仍处于禁用状态。我花了一段时间才弄清楚出了什么问题，因为我没有看到任何异常。我自己手动执行命令（而不是使用 ReactiveCommand）时才意识到这个问题。这样做引发了 UI-thread-access-exception，这让我意识到我需要做一个 ObserveOnDispatcher.

Answer 2

这个怎么样：

public class MainViewModel : ReactiveObject, IMainViewModel
{
    static TimeSpan InitialTime = TimeSpan.FromSeconds(5);

    ObservableAsPropertyHelper<TimeSpan> _RemainingTime;
    public TimeSpan RemainingTime {
        get { return _remainingTime.Value; }
    }

    ReactiveCommand<TimeSpan> _startCommand;
    public ReactiveCommand<TimeSpan> StartCommand => this._startCommand;

    ObservableAsPropertyHelper<bool> _IsRunning;
    public bool IsRunning {
        get { return this._IsRunning.Value; }
    }

    public MainViewModel()
    {
        var canStart = this.WhenAny(x => x.IsRunning, propChanged => !propChanged.Value);
        _startCommand = ReactiveCommand.CreateAsyncObservable(_ => {
          var startTime = DateTime.Now;

          return Observable.Interval(TimeSpan.FromMilliseconds(20), RxApp.MainThreadScheduler)
            .Select(__ => DateTime.Now - startTime)
            .TakeWhile((elapsed) => elapsed < InitialTime)
            .Select((elapsed) => InitialTime - elapsed);
        });

        _startCommand.IsExecuting
            .ToProperty(this, x => x.IsRunning, out _IsRunning);
        _startCommand.StartWith(TimeSpan.Zero)
            .ToProperty(this, x => x.RemainingTime, out _RemainingTime);
    }
}

Answer 3

我正在搜索如何在 reactui 中使用计时器，然后我来到了这里。我无法做到这一点运行。我使用的是 9.14.1 版本，这就是我修改 MainViewModel 使其工作的方式。

using System;
using System.Reactive;
using System.Reactive.Linq;
using ReactiveUI;

namespace TimerExample
{
    public class MainViewModel : ReactiveObject
    {
        public ReactiveCommand<Unit, TimeSpan> StartCommand { get; }

        private TimeSpan _remainingTime;
        public TimeSpan RemainingTime
        {
            get => _remainingTime;
            set => this.RaiseAndSetIfChanged(ref _remainingTime, value);
        }

        public MainViewModel()
        {
            var startTime = TimeSpan.FromSeconds(15);

            StartCommand = ReactiveCommand.CreateFromObservable<Unit, TimeSpan>(_ =>
            {
                return Observable.Interval(TimeSpan.FromSeconds(1))
                    .Select(x => startTime - TimeSpan.FromSeconds(x))
                    .TakeWhile(x => x >= TimeSpan.FromSeconds(0));
            });

            StartCommand
                .ObserveOn(RxApp.MainThreadScheduler)
                .Subscribe(span => RemainingTime = span);
        }
    }
}

如何使用 ReactiveUI 实现倒数计时器？

How do I implement a Countdown Timer Using ReactiveUI?

wpf

system.reactive

reactiveui