Flutter可重用业务逻辑组件插件reusable_bloc的使用

Flutter可重用业务逻辑组件插件reusable_bloc的使用

pub package

特性

  1. 实现整个 bloc 通过扩展 DataBloc 类并覆盖获取数据的功能。
  2. 可选地实现刷新数据，再次调用获取数据功能。
  3. 在刷新错误时记住之前的数据，并回滚到 DataLoaded 状态。
  4. 使用 Equatable 类从 equatable 包添加状态类的比较。
  5. 获取数据函数返回 Either<Failure,Data> 从 dartz 包，使其完全兼容 clean-architecture。

开始使用

这个通用 bloc 包是基于以下博客文章扩展和灵活化的版本：

如果你想学习 bloc 作为状态机，可以查阅这些博客。

使用方法

class GreetBloc extends DataBloc<String> {
  GreetBloc() : super(DataUninitialized());

  [@override](/user/override)
  Future<Either<Failure, String>> fetchAndParseData(
      DataState<String> oldState, FetchData event) async {
    final p = event.param as GreetFetchParam;
    await Future.delayed(Duration(seconds: 2)); // 模拟网络请求
    return Right(p.name);
  }
}

/// [FetchParam] 是一个包含 [FetchData] 事件可选参数的类。
class GreetFetchParam extends FetchParam {
  final String name;
  const GreetFetchParam(this.name);

  [@override](/user/override)
  List<Object?> get props => [name];
}

void main() {
  final bloc = GreetBloc();
  bloc.add(FetchData<String>(GreetFetchParam('ajeet')));
  bloc.stream.listen((event) {
    print(event);
  });
}

更多关于Flutter可重用业务逻辑组件插件reusable_bloc的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可重用业务逻辑组件插件reusable_bloc的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用reusable_bloc插件来实现可重用业务逻辑组件的示例代码。reusable_bloc插件允许你创建和管理可重用的BLoC（Business Logic Component），从而提高代码的可维护性和复用性。

首先，确保你的Flutter项目已经添加了flutter_bloc和reusable_bloc依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_bloc: ^8.0.0
  reusable_bloc: ^1.0.0 # 请注意版本号，这里使用的是假设的版本号

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

接下来，我们将创建一个简单的示例，其中包含一个可重用的BLoC来处理计数器逻辑。

1. 创建可重用的BLoC

首先，我们创建一个可重用的BLoC类。这个文件通常放在lib/bloc目录下。

// lib/bloc/counter_bloc.dart
import 'package:bloc/bloc.dart';
import 'package:reusable_bloc/reusable_bloc.dart';

part 'counter_event.dart';
part 'counter_state.dart';

class CounterBloc extends ReusableBloc<CounterEvent, CounterState> {
  CounterBloc() : super(CounterInitial());

  @override
  Stream<CounterState> mapEventToState(CounterEvent event) async* {
    if (event is CounterIncremented) {
      yield* _mapCounterIncrementedToState();
    }
  }

  Stream<CounterState> _mapCounterIncrementedToState() async* {
    yield state.copyWith(count: state.count + 1);
  }
}

2. 定义事件和状态

接下来，我们定义事件和状态类。这些文件也放在lib/bloc目录下。

// lib/bloc/counter_event.dart
part of 'counter_bloc.dart';

abstract class CounterEvent {}

class CounterIncremented extends CounterEvent {}

// lib/bloc/counter_state.dart
part of 'counter_bloc.dart';

class CounterState {
  final int count;

  CounterState({required this.count});

  CounterState copyWith({int? count}) {
    return CounterState(count: count ?? this.count);
  }

  @override
  bool operator ==(Object other) {
    if (identical(this, other)) return true;
    final listEquals = const DeepCollectionEquality().equals;

    return other is CounterState &&
        listEquals(other.count, count);
  }

  @override
  int get hashCode {
    return count.hashCode;
  }
}

class CounterInitial extends CounterState {
  CounterInitial() : super(count: 0);
}

3. 使用可重用的BLoC

现在，我们可以在Flutter组件中使用这个可重用的BLoC。

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'bloc/counter_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Reusable Bloc Example')),
        body: Center(
          child: BlocProvider(
            create: (context) => CounterBloc(),
            child: CounterPage(),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            context.read<CounterBloc>().add(CounterIncremented());
          },
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CounterBloc, CounterState>(
      builder: (context, state) {
        return Text('You have pushed the button this many times: ${state.count}');
      },
    );
  }
}

在这个示例中，我们创建了一个简单的计数器应用。CounterBloc是一个可重用的BLoC，处理计数器的增加事件。CounterPage是一个Flutter组件，它使用BlocBuilder来监听CounterBloc的状态变化并更新UI。

通过这种方式，你可以将业务逻辑组件（BLoC）与UI组件分离，提高代码的可维护性和复用性。

回到顶部