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

Wrx

Flutter Widget 的一种包装，它将 StreamBuilder 包装起来，使其更易于使用。

开始使用

1. 添加依赖到 pubspec.yaml 文件

在您的项目中添加 widget_rx 插件作为依赖项。

dependencies:
   widget_rx: ^1.0.0

2. 导入插件

在需要使用的文件中导入 widget_rx：

import 'package:widget_rx/widget_rx.dart';

条件

• onSuccess：当 snapshot.hasData 为 true 时触发。
• onError：当 snapshot.hasError 为 true 时触发。
• onWaiting：当 snapshot.hasData 为 false 时触发。

如果您希望在成功或错误状态下指示数据类型，则需要在泛型中添加数据类型 Wrx<S, E>：

• S：成功状态下的数据类型
• E：错误状态下的数据类型

该包包含一个用于错误类型的类 StreamException，它接受一个泛型以指示您想要使用的错误数据类型（参见示例）。

示例

以下是一个完整的示例，展示了如何使用 Wrx 插件来处理流数据。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:widget_rx/widget_rx.dart';
import 'package:widget_rx/exception/stream_exception.dart';

void main() => runApp(
      const Init(),
    );

// 主应用入口
class Init extends StatelessWidget {
  const Init({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Widget Reactive',
      home: Home(),
    );
  }
}

// 主页面
class Home extends StatelessWidget {
  const Home({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个流控制器
    final StreamController<String> streamController = StreamController<String>();

    return Scaffold(
      appBar: AppBar(
        title: const Text('Example Wrx'),
      ),
      body: Center(
        // 使用 Wrx 组件来监听流并处理不同状态
        child: Wrx<String, StreamException<String>>(
          stream: streamController.stream, // 监听的流
          onSuccess: (value) { // 成功状态回调
            return Text(value);
          },
          onError: (error) { // 错误状态回调
            return Text(error.data); // 显示错误信息
          },
          onWaiting: () { // 等待状态回调
            return const CircularProgressIndicator(); // 显示加载动画
          },
        ),
      ),
    );
  }
}