Flutter入门与实战（八十六）：手把手教你打造BlocProvider组件

2023-12-17 19:06:21

前言

Flutter作为当下炙手可热的跨平台移动应用开发框架，以其强大的性能、简洁的语法和丰富的组件库，俘获了众多开发者的芳心。BLoC模式作为Flutter中广受欢迎的状态管理模式之一，因其响应式、可测试性和可维护性而备受推崇。今天，我们将手把手教你如何从头构建一个BlocProvider组件，以此深入了解BLoC模式的实现原理和应用场景。

BlocProvider的奥秘

BlocProvider是BLoC模式中一个重要的组成部分，它负责为Flutter应用程序的组件提供状态。它通过将BLoC实例传递给子组件，实现对状态的共享和管理。

动手打造BlocProvider

在Flutter中构建一个BlocProvider组件仅需不到40行代码，让我们一起来见证这个神奇的时刻：

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

class BlocProvider<T extends BlocBase> extends StatelessWidget {
  final T bloc;
  final Widget child;

  const BlocProvider({
    Key key,
    @required this.bloc,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProviderScope<T>(
      bloc: bloc,
      child: child,
    );
  }
}

class BlocProviderScope<T extends BlocBase> extends InheritedWidget {
  final T bloc;

  const BlocProviderScope({
    Key key,
    @required this.bloc,
    @required Widget child,
  }) : super(key: key, child: child);

  static T of<T extends BlocBase>(BuildContext context) {
    final BlocProviderScope<T> scope =
        context.dependOnInheritedWidgetOfExactType<BlocProviderScope<T>>();
    return scope.bloc;
  }

  @override
  bool updateShouldNotify(BlocProviderScope<T> oldWidget) => false;
}

这就是我们手撸的BlocProvider组件，它将BLoC实例传递给子组件，以便在整个应用程序中轻松访问状态。

应用实践

让我们通过一个简单的计数器应用程序来了解如何在实践中使用BlocProvider：

首先，创建BLoC类来管理计数器状态：

class CounterBloc extends BlocBase {
  int _count = 0;

  final StreamController<int> _countController = StreamController<int>();

  Stream<int> get countStream => _countController.stream;

  void increment() {
    _count++;
    _countController.sink.add(_count);
  }

  void decrement() {
    _count--;
    _countController.sink.add(_count);
  }

  @override
  void dispose() {
    _countController.close();
    super.dispose();
  }
}

接下来，在主应用程序中创建BlocProvider：

void main() {
  runApp(BlocProvider<CounterBloc>(
    bloc: CounterBloc(),
    child: MyApp(),
  ));
}

最后，在应用程序的UI组件中使用BlocProvider：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterBloc = BlocProvider.of<CounterBloc>(context);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('计数器'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '当前计数：${counterBloc.countStream}',
                style: TextStyle(fontSize: 24),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  ElevatedButton(
                    child: Text('增加'),
                    onPressed: () {
                      counterBloc.increment();
                    },
                  ),
                  SizedBox(width: 20),
                  ElevatedButton(
                    child: Text('减少'),
                    onPressed: () {
                      counterBloc.decrement();
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}