MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

探究 Flutter 中 Provider 高级状态管理方案

2021-08-231.5k 阅读

Flutter 状态管理概述

在 Flutter 应用开发中，状态管理是一个至关重要的环节。随着应用复杂度的提升，如何有效地管理和更新应用状态变得愈发关键。Flutter 提供了多种状态管理方案，如 setState、InheritedWidget 等基础方案，以及更高级的 Provider、Redux、MobX 等。

基础状态管理方案的局限性

  1. setState：这是 Flutter 最基础的状态管理方式。在 StatefulWidget 中，通过调用 setState 方法来通知 Flutter 框架状态发生了改变，进而触发 UI 重新构建。例如：
class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

然而，setState 的问题在于，当应用规模变大，状态逻辑复杂时，代码会变得难以维护。所有状态相关的逻辑都集中在 StatefulWidget 的 State 类中，导致代码臃肿，可测试性差。

  1. InheritedWidget：它是 Flutter 中实现数据共享的一种机制。通过在 widget 树中传递数据，使得子 widget 可以获取到祖先 widget 的数据，而无需通过逐层传递参数。例如：
class MyInheritedWidget extends InheritedWidget {
  final String data;
  MyInheritedWidget({Key key, @required this.data, Widget child})
      : super(key: key, child: child);

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

  @override
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
    return data != oldWidget.data;
  }
}

class ChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = MyInheritedWidget.of(context).data;
    return Text('Data from InheritedWidget: $data');
  }
}

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      data: 'Hello, InheritedWidget',
      child: ChildWidget(),
    );
  }
}

虽然 InheritedWidget 解决了数据共享的问题，但它的使用相对复杂。开发者需要手动处理数据变化通知，而且如果数据变化频繁，可能会导致不必要的 UI 重绘，性能问题较为突出。

Provider 简介

Provider 是 Flutter 社区中广泛使用的一个状态管理库，它基于 InheritedWidget 进行了封装和扩展，提供了一种简洁、高效的状态管理方式。Provider 的核心思想是通过 Provider 类将状态数据提供给 widget 树中的子 widget，子 widget 可以通过 Consumer 或 Provider.of 来获取和监听状态变化。

Provider 的安装与引入

在 pubspec.yaml 文件中添加依赖：

dependencies:
  provider: ^6.0.5

然后在项目中引入：

import 'package:provider/provider.dart';

Provider 的基本使用

  1. 创建状态类：首先，我们需要创建一个包含状态数据和相关操作的类。例如，创建一个简单的计数器状态类：
class Counter {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}
  1. 使用 Provider 提供状态：在 widget 树的合适位置，使用 Provider 来提供状态数据。通常在应用的顶层或某个子树的顶层。
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

这里使用了 ChangeNotifierProvider，它适用于继承自 ChangeNotifier 的状态类。ChangeNotifier 是 Flutter 提供的一个类，用于通知监听器状态发生了变化。

  1. 获取和使用状态：在子 widget 中，可以通过 Consumer 或 Provider.of 来获取状态数据。
  • 使用 Consumer：
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  'Count: ${counter.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Consumer 接受一个 builder 回调，在回调中可以获取到状态对象，并根据状态构建相应的 UI。

  • 使用 Provider.of：
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count: ${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Provider.of 直接从 context 中获取状态对象。需要注意的是，使用 Provider.of 时，如果 listen 参数为 true（默认值），widget 会监听状态变化，当状态变化时会触发 UI 重新构建。如果在某些情况下不需要监听状态变化（如在按钮点击事件中更新状态），可以将 listen 设置为 false。

Provider 的高级特性

多重 Provider

在实际应用中，一个应用往往需要管理多个不同的状态。Provider 支持在 widget 树中同时使用多个 Provider。例如，除了计数器状态，我们再添加一个用户信息状态。

  1. 创建用户信息状态类：
class User {
  String name;
  int age;

  User({this.name, this.age});
}
  1. 使用多重 Provider：
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        ChangeNotifierProvider(create: (context) => User(name: 'John', age: 30)),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}
  1. 在子 widget 中获取多个状态：
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    final user = Provider.of<User>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Provider'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count: ${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              'User: ${user.name}, ${user.age}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

通过 MultiProvider，可以方便地在 widget 树中同时提供多个状态，子 widget 可以根据需要获取不同的状态对象。

Selector

Selector 是 Provider 提供的一个强大功能，它允许我们有选择性地监听状态的部分变化，而不是整个状态对象的变化。这在性能优化方面非常有用，特别是当状态对象较大，而我们只关心其中某些属性变化时。

  1. 使用 Selector：假设我们的 Counter 类增加了一个布尔属性 isLoading。
class Counter {
  int _count = 0;
  bool _isLoading = false;

  int get count => _count;
  bool get isLoading => _isLoading;

  void increment() {
    _count++;
  }

  void startLoading() {
    _isLoading = true;
  }

  void stopLoading() {
    _isLoading = false;
  }
}

在 UI 中，我们只想在 count 属性变化时更新显示计数的 Text 组件，而在 isLoading 属性变化时更新显示加载状态的 Text 组件。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Selector Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Selector<Counter, int>(
              selector: (_, counter) => counter.count,
              builder: (context, count, child) {
                return Text(
                  'Count: $count',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            Selector<Counter, bool>(
              selector: (_, counter) => counter.isLoading,
              builder: (context, isLoading, child) {
                return Text(
                  isLoading? 'Loading...' : 'Not loading',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Selector 的 selector 参数是一个回调函数，它从状态对象中选择我们关心的部分。只有当这部分数据发生变化时，才会触发 builder 回调，进而更新相关的 UI。这样可以避免不必要的 UI 重绘，提高应用性能。

Provider 的嵌套与作用域

Provider 支持在 widget 树中进行嵌套使用，每个 Provider 都有自己的作用域。子 widget 会优先获取离它最近的 Provider 提供的状态。例如：

class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: Column(
        children: <Widget>[
          ChildWidget1(),
          ChangeNotifierProvider(
            create: (context) => Counter(),
            child: ChildWidget2(),
          ),
        ],
      ),
    );
  }
}

class ChildWidget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Text('ChildWidget1 - Count: ${counter.count}');
  }
}

class ChildWidget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Text('ChildWidget2 - Count: ${counter.count}');
  }
}

在这个例子中，ChildWidget1 获取的是外层 Provider 提供的 Counter 实例，而 ChildWidget2 获取的是内层 Provider 提供的 Counter 实例。这种嵌套和作用域机制使得我们可以根据不同的需求，在 widget 树的不同层级灵活地管理状态。

Provider 与依赖注入

Provider 不仅可以用于状态管理，还可以实现依赖注入。依赖注入是一种设计模式，通过将依赖对象传递给需要它的对象，而不是让对象自己创建依赖。在 Flutter 中，我们可以使用 Provider 来实现依赖注入。例如，我们有一个服务类 UserService，用于获取用户信息。

class UserService {
  Future<String> fetchUserName() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    return 'Alice';
  }
}

在应用中，我们可以使用 Provider 来提供 UserService 实例。

void main() {
  runApp(
    Provider(
      create: (context) => UserService(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userService = Provider.of<UserService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Dependency Injection with Provider'),
      ),
      body: Center(
        child: FutureBuilder(
          future: userService.fetchUserName(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('User Name: ${snapshot.data}');
            }
          },
        ),
      ),
    );
  }
}

通过这种方式，我们可以方便地在不同的 widget 中获取 UserService 实例，而不需要在每个 widget 中手动创建 UserService 对象。这不仅提高了代码的可维护性和可测试性，还使得代码更加模块化。

Provider 与其他状态管理方案的比较

Provider 与 Redux

  1. 设计理念：

    • Redux：遵循严格的单向数据流。应用的状态被集中存储在一个单一的 store 中，所有的状态变化都通过派发（dispatch）action 来触发，action 会被 reducer 处理，从而产生新的状态。这种模式使得状态变化可追踪，易于调试，但也导致代码结构相对复杂，尤其是在处理复杂业务逻辑时，需要编写大量的 action、reducer 和 middleware。
    • Provider：相对更加灵活，它没有严格的单向数据流限制。状态可以根据需要在 widget 树的不同层级进行管理，通过 Provider 提供状态，子 widget 获取并监听状态变化。这种方式更符合 Flutter 的 widget 树结构，代码相对简洁，易于理解和维护。

  2. 使用场景：

    • Redux：适用于大型、复杂的应用，尤其是需要严格的状态管理和调试追踪的场景。例如，企业级应用或涉及大量业务逻辑和状态变化的应用。
    • Provider：适用于中小规模的应用，或者对代码简洁性和灵活性要求较高的项目。它可以快速搭建起状态管理框架，减少开发成本。

Provider 与 MobX

  1. 状态管理方式：

    • MobX：基于 observable（可观察）和 reaction（响应式）的概念。通过将状态标记为 observable，当状态发生变化时，相关的 reaction 会自动触发，从而更新 UI。MobX 使用注解来简化代码编写，例如 @observable 用于标记可观察状态，@action 用于标记修改状态的方法。
    • Provider：基于 InheritedWidget 进行封装，通过 Provider 提供状态，子 widget 通过 Consumer 或 Provider.of 获取并监听状态变化。Provider 更侧重于在 widget 树中共享状态，与 Flutter 的原生 widget 体系结合得更加紧密。

  2. 学习曲线：

    • MobX：由于使用了注解和一些新的概念，对于初学者来说，学习曲线相对较陡。需要理解 observable、reaction 等概念以及如何正确使用注解来管理状态。
    • Provider：基于 Flutter 开发者熟悉的 InheritedWidget 机制，学习成本较低。已经熟悉 Flutter 基本原理的开发者可以快速上手 Provider。

最佳实践与注意事项

状态类设计

  1. 单一职责原则：在设计状态类时，应遵循单一职责原则。每个状态类应该只负责管理一种类型的状态和相关操作。例如，计数器状态类只负责管理计数器的状态和计数增加操作，而用户信息状态类只负责管理用户的相关信息和操作。这样可以使代码结构清晰，易于维护和扩展。

  2. 可测试性：状态类应该设计得易于测试。尽量将业务逻辑封装在状态类的方法中，避免在 widget 中直接处理复杂的状态逻辑。这样可以方便地对状态类进行单元测试，提高代码的可靠性。

合理使用 Provider 层级

  1. 避免过度嵌套：虽然 Provider 支持嵌套使用，但过度嵌套会导致代码结构复杂，难以理解和维护。应根据应用的实际需求，合理确定 Provider 的层级。通常，将一些全局共享的状态放在应用的顶层，而局部状态放在相关的子树顶层。

  2. 注意作用域：在使用 Provider 嵌套时，要清楚每个 Provider 的作用域。确保子 widget 获取到的是正确的状态实例，避免因作用域问题导致状态混乱。

性能优化

  1. 使用 Selector：如前文所述，Selector 是优化性能的重要工具。在状态对象较大时，应尽量使用 Selector 来有选择性地监听状态变化，避免不必要的 UI 重绘。

  2. 减少不必要的重建：在使用 Provider.of 获取状态时，合理设置 listen 参数。如果在某些操作中不需要监听状态变化（如按钮点击更新状态），将 listen 设置为 false，以减少不必要的 widget 重建。

与其他库的集成

在实际项目中，Provider 通常需要与其他库一起使用。例如，与网络请求库（如 Dio）集成来获取数据并更新状态。在集成时，要注意库之间的兼容性和调用顺序，确保整个应用的逻辑流畅。

代码示例综合展示

以下是一个综合的示例，展示了 Provider 的多重使用、Selector 的应用以及与依赖注入的结合。

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

// 计数器状态类
class Counter {
  int _count = 0;
  bool _isLoading = false;

  int get count => _count;
  bool get isLoading => _isLoading;

  void increment() {
    _count++;
  }

  void startLoading() {
    _isLoading = true;
  }

  void stopLoading() {
    _isLoading = false;
  }
}

// 用户服务类
class UserService {
  Future<String> fetchUserName() async {
    await Future.delayed(Duration(seconds: 2));
    return 'Bob';
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        Provider(create: (context) => UserService()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userService = Provider.of<UserService>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Provider Advanced Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Selector<Counter, int>(
              selector: (_, counter) => counter.count,
              builder: (context, count, child) {
                return Text(
                  'Count: $count',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            Selector<Counter, bool>(
              selector: (_, counter) => counter.isLoading,
              builder: (context, isLoading, child) {
                return Text(
                  isLoading? 'Loading...' : 'Not loading',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            FutureBuilder(
              future: userService.fetchUserName(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return Text('User Name: ${snapshot.data}');
                }
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Provider.of<Counter>(context, listen: false).increment();
          Provider.of<Counter>(context, listen: false).startLoading();
          Future.delayed(Duration(seconds: 1), () {
            Provider.of<Counter>(context, listen: false).stopLoading();
          });
        },
        tooltip: 'Increment and Simulate Loading',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，我们通过 MultiProvider 同时提供了 Counter 状态和 UserService 实例。在 HomePage 中，使用 Selector 分别监听 Counter 状态的不同部分，并通过 FutureBuilder 使用 UserService 获取用户信息。同时，在按钮点击事件中，演示了如何更新 Counter 状态并模拟加载过程。

通过以上对 Provider 高级状态管理方案的探究，我们可以看到 Provider 在 Flutter 应用开发中具有强大的功能和灵活性。合理使用 Provider 可以有效地管理应用状态，提高代码的可维护性和性能。无论是小型应用还是大型项目，Provider 都能为开发者提供一种简洁高效的状态管理解决方案。在实际开发中，开发者应根据项目的具体需求，灵活运用 Provider 的各种特性，结合最佳实践，打造出高质量的 Flutter 应用。