Flutter响应式编程插件rx_command的使用

概述

RxCommand 是一个基于 Reactive Extensions (Rx) 的事件处理抽象库。它借鉴了 ReactiveUI 框架中的 ReactiveCommand，并大量使用了 RxDart 包。RxCommand 可以将给定的处理函数封装起来，并通过其 Stream 接口发布方法的结果。此外，它还提供了当前执行状态、命令是否可以执行以及命令执行过程中可能抛出的异常等信息。

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  rxdart: ^0.27.3
  rx_command: ^5.0.0

然后运行 flutter pub get 来安装这些依赖。

基本用法

创建 RxCommand

RxCommand 是一个泛型类 RxCommand<TParam, TResult>，其中 TParam 是调用 execute 方法时传递的数据类型，TResult 是处理函数的返回类型。如果处理函数不接受参数或不返回值，可以使用 void 类型。

同步命令

import 'package:rx_command/rx_command.dart';

final command = RxCommand.createSync<int, String>((myInt) => "$myInt");

command.listen((s) => print(s)); // 设置监听器，等待事件

command.execute(10); // 监听器将打印 "10"

异步命令

final asyncCommand = RxCommand.createAsync<int, String>((myInt) async {
  await Future.delayed(Duration(seconds: 1));
  return "Async $myInt";
});

asyncCommand.listen((s) => print(s)); // 设置监听器，等待事件

asyncCommand.execute(10); // 1秒后监听器将打印 "Async 10"

使用限制流

你可以通过 restriction 参数来控制命令是否可以执行。例如，当某个开关的状态改变时，可以启用或禁用命令：

final switchChangedCommand = RxCommand.createSync<bool, bool>((b) => b);

final updateWeatherCommand = RxCommand.createAsync<String, List<WeatherEntry>>(update, switchChangedCommand);

错误处理

默认情况下，所有由封装函数抛出的异常都会被捕获并忽略。如果你希望对这些异常作出反应，可以监听 thrownException 属性。如果你想强制 RxCommand 不捕获异常，可以设置 throwExceptions 属性为 true。

final command = RxCommand.createSync<int, String>((myInt) {
  if (myInt < 0) throw Exception("Negative number");
  return "$myInt";
});

command.thrownException.listen((ex) => print("Error: $ex"));

command.execute(-1); // 将打印 "Error: Negative number"

在 Flutter 应用中使用 RxCommand

ViewModel

通常，RxCommand 用于页面的 ViewModel 中。ViewModel 可以通过 InheritedWidget 或 GetIt 等方式提供给 Widgets。

import 'package:rxdart/rxdart.dart';
import 'package:rx_command/rx_command.dart';

class WeatherViewModel {
  final RxCommand<String, List<WeatherEntry>> updateWeatherCommand;
  final RxCommand<bool, bool> switchChangedCommand;

  WeatherViewModel() {
    switchChangedCommand = RxCommand.createSync<bool, bool>((b) => b);

    updateWeatherCommand = RxCommand.createAsync<String, List<WeatherEntry>>(update, switchChangedCommand);
  }

  Future<List<WeatherEntry>> update(String city) async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 1));
    return [WeatherEntry(city, 10.0, 30.0, "sunny", 12)];
  }
}

View

在 View 中，可以通过 StreamBuilder 来监听 RxCommand 的结果，并根据不同的状态显示不同的 UI 元素。

import 'package:flutter/material.dart';
import 'package:rx_command/rx_command.dart';
import 'weather_viewmodel.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = TheViewModel.of(context);

    return Scaffold(
      appBar: AppBar(title: Text('Weather App')),
      body: Column(
        children: [
          TextField(
            onChanged: viewModel.textChangedCommand,
          ),
          StreamBuilder<bool>(
            stream: viewModel.updateWeatherCommand.isExecuting,
            builder: (context, snapshot) {
              if (snapshot.hasData && snapshot.data!) {
                return CircularProgressIndicator();
              }
              return WeatherListView(viewModel.updateWeatherCommand);
            },
          ),
          Row(
            children: [
              ElevatedButton(
                onPressed: viewModel.updateWeatherCommand.canExecute ? () => viewModel.updateWeatherCommand.execute("London") : null,
                child: Text('Update Weather'),
              ),
              Switch(
                value: viewModel.switchChangedCommand.lastResult ?? false,
                onChanged: (value) => viewModel.switchChangedCommand.execute(value),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class WeatherListView extends StatelessWidget {
  final RxCommand<String, List<WeatherEntry>> command;

  WeatherListView(this.command);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<WeatherEntry>>(
      stream: command,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final weather = snapshot.data![index];
              return ListTile(
                title: Text(weather.city),
                subtitle: Text("${weather.temperature}°C"),
              );
            },
          );
        }
        return Center(child: Text('No data'));
      },
    );
  }
}

InheritedWidget

使用 InheritedWidget 将 ViewModel 提供给子 Widgets。

import 'package:flutter/material.dart';
import 'weather_viewmodel.dart';

class TheViewModel extends InheritedWidget {
  final WeatherViewModel theModel;

  const TheViewModel({Key? key, required this.theModel, required Widget child})
      : super(key: key, child: child);

  static WeatherViewModel of(BuildContext context) =>
      context.dependOnInheritedWidgetOfExactType<TheViewModel>()!.theModel;

  @override
  bool updateShouldNotify(TheViewModel oldWidget) => theModel != oldWidget.theModel;
}

主程序入口

import 'package:flutter/material.dart';
import 'homepage.dart';
import 'weather_viewmodel.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  late WeatherViewModel viewModelData;

  @override
  void initState() {
    viewModelData = WeatherViewModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return TheViewModel(
      theModel: viewModelData,
      child: MaterialApp(title: 'Flutter Demo', home: HomePage()),
    );
  }
}

总结

RxCommand 是一个强大的工具，可以帮助你在 Flutter 应用中实现响应式编程。通过将业务逻辑封装在 ViewModel 中，并使用 StreamBuilder 和 InheritedWidget，你可以轻松地管理应用的状态和数据流。希望本文档能帮助你更好地理解和使用 RxCommand。