Question

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

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

我正在尝试使用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

这个怎么样：

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 2

我能够通过进行以下更改来实现这一目标：

添加了 vm.IsRunning 标志，该标志在Start（）上设置为true，并在 timerStream 完成时设置为false。
在 IsRunning 属性中使用 ReactiveObject.WhenAny（...），并将其用作ReactiveCommand的 canExecute 可观察。
我还更新了 timerStream observable的实现。为了使计时器更准确，我更新了它，以便它在开始时捕获 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（）并遇到一个问题，即使在观察完成后，Button仍然处于禁用状态。我花了一段时间才弄清楚出了什么问题，因为我没有看到任何异常。我自己手动实现命令（而不是使用ReactiveCommand）时才意识到这个问题。这样做会引发UI-thread-access-exception，这让我意识到我需要做一个 ObserveOnDispatcher 。

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实现倒数计时器？

3 个答案: