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

Reactive 是一个基于单例的动态状态管理器，允许以全局方式管理变量，并且支持条件、状态导向以及反应式管理。学习曲线非常短，实现也很简单，但仍然可以进行更强大的实现，从而获得更高的控制力和性能。

特性

refresh(dynamic dependency): 通知特定监听器更新其状态。
statusOf(String key): 返回一个Worker的状态。
setStatus(String key, dynamic status): 设置一个Worker的状态。

开始使用

安装Reactive包后，只需在需要的地方使用即可！:)

使用示例

enum ExampleStatus {
  loading,
  sucess,
  fail,
}

class MyController {
  List<String> myExamples = [];
  int counter = 0;

  myFunction() {
    setStatus(ExampleStatus.loading);
    return http.get("/examples")
        .then((examples) {
      myExamples = examples;
      refreshStatus(ExampleStatus.sucess); // 改变请求状态为成功并更新屏幕上的反应式组件
    }).catchError((err) {
      refreshStatus(ExampleStatus.fail); // 改变请求状态为失败并更新屏幕上的反应式组件
    });
  }

  count() {
    counter++;
    refresh(); // 更新屏幕上的反应式组件
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  MyController myController = MyController();

  [@override](/user/override)
  void initState() {
    super.initState();
    myController.myFunction();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Reactive(() => Text("Counter: ${myController.counter}")), // 使文本具有反应性
      ),
      body: ReactiveStatus<ExampleStatus>(// 允许屏幕具有反应性，并根据状态更改其组件
        {
          ExampleStatus.sucess: () => ExampleListView(items: myController.myExamples),// 成功时显示列表
          ExampleStatus.fail: () => const Text(" fail :( "),// 失败时显示错误信息
          ExampleStatus.loading: () => const CircularProgressIndicator(),// 加载时显示进度指示器
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: myController.count,
        child: const Icon(Icons.add),
      ),
    );
  }
}

更多关于Flutter响应式编程插件reactivity的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼

更多关于Flutter响应式编程插件reactivity的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

在Flutter中，响应式编程是一种非常流行的编程范式，它允许你以声明式的方式处理状态变化。虽然Flutter本身提供了StatefulWidget和setState来管理状态，但在复杂的应用中，手动管理状态可能会变得繁琐。为了简化状态管理，社区开发了许多响应式编程插件，如Provider、Riverpod、Bloc等。

然而，你提到的reactivity并不是Flutter社区中广泛使用的插件。可能是某个特定的库或自定义的解决方案。如果你指的是某个特定的插件或库，请提供更多的上下文或文档链接，我可以帮助你更好地理解和使用它。

常见的Flutter响应式编程插件

如果你对Flutter中的响应式编程感兴趣，以下是一些常见的插件和库：

Provider:

Provider是Flutter中最流行的状态管理库之一。它基于InheritedWidget，提供了一种简单的方式来管理和共享状态。
使用Provider，你可以将状态注入到Widget树中，并在需要的地方获取它。

示例：

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

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text(
                    '${counter.count}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Provider.of<Counter>(context, listen: false).increment();
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Riverpod:

Riverpod是Provider的改进版本，提供了更强大的功能和更好的类型安全性。
它允许你在不依赖BuildContext的情况下访问状态。

示例：

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

final counterProvider = StateProvider<int>((ref) => 0);

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('You have pushed the button this many times:'),
              Consumer(
                builder: (context, watch, child) {
                  final count = watch(counterProvider).state;
                  return Text(
                    '$count',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read(counterProvider).state++;
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Bloc:

Bloc是一种基于事件驱动的状态管理库，它将业务逻辑与UI分离。
它使用Stream和Sink来处理状态变化。

示例：

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

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => CounterCubit(),
        child: CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bloc Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            BlocBuilder<CounterCubit, int>(
              builder: (context, count) {
                return Text(
                  '$count',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterCubit>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}