Flutter响应式编程与状态管理插件flutter_rx_bloc的使用

概述

flutter_rx_bloc 是一个Flutter包，它通过反应式流的力量帮助实现BLoC设计模式。该包旨在与 rx_bloc 和 rx_bloc_generator 一起工作。

主要特性

• 支持多个输出流（状态）每个BloC。
• 提供多种构建器小部件，如 RxBlocBuilder, RxBlocMultiBuilder2, RxBlocMultiBuilder3 等。
• 集成了 RxBlocProvider 用于依赖注入。
• 提供了 RxResultBuilder 来处理 Result 类型的状态。
• 包含 RxBlocListener 用于响应状态变化执行特定操作。
• 支持表单字段的构建和更新，如 RxFormFieldBuilder 和 RxTextFormFieldBuilder。

Bloc Widgets

RxBlocBuilder

RxBlocBuilder<NewsBlocType, List<News>>(
  state: (bloc) => bloc.states.news,
  builder: (context, state, bloc) {
    // 返回基于状态的Widget
  }
)

RxBlocMultiBuilder2

RxBlocMultiBuilder2<NewsBlocType, List<BreakingNews>, List<News>>(
  state1: (bloc) => bloc.states.breakingNews,
  state2: (bloc) => bloc.states.news,
  builder: (context, breakingNews, news, bloc) {
    // 返回基于多个状态的Widget
  }
)

RxBlocMultiBuilder3

RxBlocMultiBuilder3<NewsBlocType, List<BreakingNews>, List<News>, List<TopStory>>(
  state1: (bloc) => bloc.states.breakingNews,
  state2: (bloc) => bloc.states.news,
  state3: (bloc) => bloc.states.topStories,
  builder: (context, breakingNews, news, topStories, bloc) {
    // 返回基于多个状态的Widget
  }
)

RxResultBuilder

RxResultBuilder<NewsBlocType, List<News>>(
  state: (bloc) => bloc.states.news,
  buildSuccess: (context, data, bloc) {
    // 返回成功时的Widget
  },
  buildLoading: (context, bloc) {
    // 返回加载中的Widget
  },
  buildError: (context, error, bloc) {
    // 返回错误时的Widget
  },
)

RxBlocProvider

RxBlocProvider<BlocAType>(
  create: (BuildContext context) => BlocA(),
  child: ChildA(),
);

RxMultiBlocProvider

RxMultiBlocProvider(
  providers: [
    RxBlocProvider<BlocAType>(
      create: (BuildContext context) => BlocA(),
    ),
    RxBlocProvider<BlocBType>(
      create: (BuildContext context) => BlocB(),
    ),
    RxBlocProvider<BlocCType>(
      create: (BuildContext context) => BlocC(),
    ),
  ],
  child: ChildA(),
)

RxBlocListener

RxBlocListener<NewsBlocType, bool>(
  state: (bloc) => bloc.states.isLoading,
  listener: (context, state) {
    // 基于状态执行某些操作
  }
)

示例代码

CounterApp

import 'package:flutter/material.dart';
import 'package:flutter_rx_bloc/flutter_rx_bloc.dart';
import 'package:rx_bloc/rx_bloc.dart';
import 'package:rxdart/rxdart.dart';

void main() {
  runApp(const CounterApp());
}

class CounterApp extends StatelessWidget {
  const CounterApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Counter sample',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: RxBlocProvider<CounterBlocType>(
          create: (ctx) => CounterBloc(CounterRepository()),
          child: const CounterPage(),
        ),
      );
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: const Text('Counter sample')),
        body: Center(
          child: RxBlocListener<CounterBlocType, String>(
            state: (bloc) => bloc.states.errors,
            listener: _showError,
            child: RxBlocBuilder<CounterBlocType, int>(
              state: (bloc) => bloc.states.count,
              builder: (context, snapshot, bloc) =>
                  _buildCount(snapshot, context),
            ),
          ),
        ),
        floatingActionButton: RxLoadingBuilder<CounterBlocType>(
          state: (bloc) => bloc.states.isLoading,
          builder: (context, isLoading, tag, bloc) => Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              ActionButton(
                tooltip: 'Increment',
                iconData: Icons.add,
                onPressed: bloc.events.increment,
                disabled: isLoading,
                loading: isLoading && tag == CounterBloc.tagIncrement,
              ),
              const SizedBox(width: 16),
              ActionButton(
                tooltip: 'Decrement',
                iconData: Icons.remove,
                onPressed: bloc.events.decrement,
                disabled: isLoading,
                loading: isLoading && tag == CounterBloc.tagDecrement,
              ),
            ],
          ),
        ),
      );

  StatelessWidget _buildCount(
    AsyncSnapshot<int> snapshot,
    BuildContext context,
  ) =>
      snapshot.hasData
          ? Text(
              snapshot.data.toString(),
              style: Theme.of(context).textTheme.headlineMedium,
            )
          : Container();

  void _showError(BuildContext context, String errorMessage) =>
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text(errorMessage),
          behavior: SnackBarBehavior.floating,
        ),
      );
}

class ActionButton extends StatelessWidget {
  const ActionButton({
    required this.iconData,
    required this.onPressed,
    this.disabled = false,
    this.tooltip = '',
    this.loading = false,
    Key? key,
  }) : super(key: key);

  final bool disabled;
  final bool loading;
  final String tooltip;
  final IconData iconData;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    if (loading) {
      return const Padding(
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: CircularProgressIndicator(),
      );
    }

    return FloatingActionButton(
      backgroundColor: disabled ? Colors.blueGrey : Colors.blue,
      onPressed: !disabled ? onPressed : null,
      tooltip: tooltip,
      child: Icon(iconData),
    );
  }
}

extension AsyncSnapshotLoadingState on AsyncSnapshot<bool> {
  bool get isLoading => hasData && data!;
  Color get buttonColor => isLoading ? Colors.blueGrey : Colors.blue;
}

CounterBloc

abstract class CounterBlocEvents {
  void increment();
  void decrement();
}

abstract class CounterBlocStates {
  Stream<int> get count;
  Stream<LoadingWithTag> get isLoading;
  Stream<String> get errors;
}

@RxBloc()
class CounterBloc extends $CounterBloc {
  CounterBloc(this._repository);

  final CounterRepository _repository;

  static const tagIncrement = 'Increment';
  static const tagDecrement = 'Decrement';

  @override
  Stream<int> _mapToCountState() => Rx.merge<Result<int>>([
        _$incrementEvent.switchMap(
            (_) => _repository.increment().asResultStream(tag: tagIncrement)),
        _$decrementEvent.switchMap(
            (_) => _repository.decrement().asResultStream(tag: tagDecrement)),
      ])
          .setResultStateHandler(this)
          .whereSuccess()
          .startWith(0);

  @override
  Stream<String> _mapToErrorsState() =>
      errorState.map((error) => error.toString());

  @override
  Stream<LoadingWithTag> _mapToIsLoadingState() => loadingWithTagState;
}

CounterRepository

class CounterRepository {
  int _counter = 0;

  Future<int> increment() async {
    await Future.delayed(const Duration(milliseconds: 800));
    if (_counter == 2) {
      throw Exception('Maximum number is reached!');
    }
    return ++_counter;
  }

  Future<int> decrement() async {
    await Future.delayed(const Duration(milliseconds: 800));
    if (_counter <= 0) {
      throw Exception('Minimum number is reached!');
    }
    return --_counter;
  }
}

通过上述代码示例，可以清晰地看到如何在Flutter中使用 flutter_rx_bloc 实现响应式编程和状态管理。希望这些内容对你有所帮助！