Flutter Provider状态管理简易教程

Android

2023-12-02 14:15:02

何需状态管理？

当构建一个复杂的Flutter应用程序时，常常需要在不同widget之间共享数据。在Flutter早期，通常使用全局变量或InheritedWidget来实现数据共享。然而，这些方法存在一些缺陷：

全局变量难以管理，容易造成混乱。
InheritedWidget存在数据流层次较深，而且更新不方便的缺点。

因此，为了解决这些问题，诞生了许多状态管理工具，其中最受欢迎的之一就是Provider。

Provider介绍

Provider是一个功能强大的状态管理工具，它可以帮助我们在Flutter应用程序中轻松地共享数据。Provider的核心思想是使用InheritedWidget来传递数据，并使用ChangeNotifier来通知监听器数据发生了变化。

使用Provider，我们可以将数据封装成一个Provider对象，然后在需要使用这些数据的widget中使用Consumer来获取数据。Provider具有以下特点：

易于使用，学习曲线较低。
性能良好，不会对应用程序的性能造成显著影响。
扩展性强，可以轻松地与其他状态管理工具集成。

如何使用Provider？

我们现在来编写一个简易版的Provider。我们会用到以下系统组件：

InheritedWidget：一个基础widget，让widget树具备从上而下传递数据的能力。同时数据变化可以引起依赖它的widget重新构建。
ChangeNotifier：一个抽象类，它提供了一些方法来通知监听器数据发生了变化。
StatefulWidget：一个带有状态的widget，它可以保存数据并在数据发生变化时更新UI。
StatelessWidget：一个没有状态的widget，它只负责渲染UI。
Setter：用于设置数据的属性或方法。
Getter：用于获取数据的属性或方法。
Listener：一个widget，它可以监听另一个widget的数据变化并做出相应的反应。
Consumer：一个widget，它可以获取一个Provider对象并将其数据传递给子widget。
BuildContext：一个对象，它可以提供当前widget的上下文信息。

现在，我们来一步一步地实现一个简易版的Provider：

创建一个ChangeNotifier类来保存数据。

class MyProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

创建一个Provider类来包装ChangeNotifier对象。

class MyProviderProvider extends InheritedWidget {
  final MyProvider provider;

  const MyProviderProvider({
    Key? key,
    required this.provider,
    required Widget child,
  }) : super(key: key, child: child);

  static MyProviderProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyProviderProvider>()!;
  }

  @override
  bool updateShouldNotify(covariant MyProviderProvider oldWidget) {
    return provider != oldWidget.provider;
  }
}

在需要使用数据的widget中使用Consumer来获取数据。

class MyWidget extends Consumer<MyProvider> {
  @override
  Widget build(BuildContext context, MyProvider provider, Widget? child) {
    return Text('Count: ${provider.count}');
  }
}

在应用程序的根widget中创建一个MyProviderProvider对象，并将它传递给子widget。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyProviderProvider(
      provider: MyProvider(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Provider Example'),
          ),
          body: Center(
            child: MyWidget(),
          ),
        ),
      ),
    );
  }
}

现在，你就可以在你的Flutter应用程序中使用Provider来管理状态了。

Provider与其他状态管理工具的比较

状态管理工具	优点	缺点
Provider	易于使用，学习曲线较低	性能稍逊于其他状态管理工具
BLoC	性能良好，可扩展性强	学习曲线较高，使用复杂
Redux	性能良好，可扩展性强	学习曲线较高，使用复杂
MobX	易于使用，学习曲线较低	性能稍逊于其他状态管理工具