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

rx_widgets 是一个基于流（Stream）的Flutter小部件包，旨在促进响应式编程风格。它特别适合与 RxDart 和 RxCommands 结合使用。

开始使用

首先，在你的 pubspec.yaml 文件中添加对 rx_widgets 的依赖：

dependencies:
  rx_widgets: ^latest_version

然后运行 flutter pub get 来安装这个包。

可用的小部件

以下是 rx_widgets 提供的一些主要小部件及其使用方法：

RxElevatedButton

RxElevatedButton 是一个扩展的 ElevatedButton，它使用 rxCommand 而不是 onPressed。当命令的 canExecute 设置为 false 或正在执行时，按钮会自动禁用。

RxElevatedButton(
  rxCommand: myCommand,
  child: Text('Click Me'),
)

RxText

RxText 是一个显示来自 Stream<String> 数据的小部件。它非常适合用于显示状态消息或请求结果。

RxText(
  stream: myStringStream,
  errorBuilder: (context, error) => Text(error.toString()),
  placeHolderBuilder: (_) => CircularProgressIndicator(),
)

RxSpinner

RxSpinner 是一个根据 Stream<bool> 控制的加载指示器。当接收到 true 值时开始旋转，直到接收到 false 值为止。

RxSpinner(
  busyEvents: isLoadingStream,
  radius: 20.0,
  normal: Text('Data Loaded'),
)

RxLoader

RxLoader 更适合处理数据加载过程中的错误和替代小部件展示。

RxLoader(
  commandResults: loadDataCommand.results,
  dataBuilder: (context, data) => Text(data.toString()),
  errorBuilder: (context, error) => Text(error.toString()),
  placeHolderBuilder: (_) => CircularProgressIndicator(),
)

WidgetSelector

WidgetSelector 根据 Stream<bool> 输出返回两个不同的小部件之一。这对于根据 ViewModel 中的状态更改更新视图非常有用。

WidgetSelector(
  buildEvents: isButtonEnabledStream,
  onTrue: ElevatedButton(
    child: Text("Update"),
    onPressed: () {
      // Action
    },
  ),
  onFalse: ElevatedButton(
    child: Text("Please Wait"),
    onPressed: null,
  ),
)

ReactiveBuilder

ReactiveBuilder 封装了 StreamBuilder，简化了流数据的处理。

class Animal {
  String name;
  int age;
}

class Example extends StatelessWidget {
  final Stream<Animal> stream;

  Example(this.stream);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ReactiveBuilder<Animal>(
      stream: stream,
      builder: (BuildContext context, data) {
        return ListTile(
          title: Text(data.name),
          subtitle: Text("${data.age}"),
        );
      },
    );
  }
}

示例项目

下面是一个简单的示例项目结构，展示了如何在实际应用中使用这些组件。假设你有一个天气服务模型，并希望在主页面上显示天气信息。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:rx_widget_demo/homepage/home_page.dart';
import 'package:rx_widget_demo/homepage/homepage_model.dart';
import 'package:rx_widget_demo/model_provider.dart';
import 'package:rx_widget_demo/service/weather_service.dart';

void main() {
  final weatherService = WeatherService(http.Client());
  final homePageModel = HomePageModel(weatherService);

  runApp(
    MyApp(model: homePageModel),
  );
}

class MyApp extends StatelessWidget {
  final HomePageModel model;

  const MyApp({Key? key, required this.model}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ModelProvider(
      model: model,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData.dark().copyWith(
          disabledColor: Colors.white12,
          primaryColor: Color(0xFF1C262A),
          scaffoldBackgroundColor: Color.fromRGBO(38, 50, 56, 1.0),
        ),
        home: HomePage(),
      ),
    );
  }
}