释放 Flutter 状态管理的无限可能：Provider XXProvider 的使用指南

Android

2023-09-14 05:04:09

Provider 的 XXProvider：打造健壮、可维护的 Flutter 应用程序

什么是 Provider？

在 Flutter 中，状态管理对于创建响应式、交互式应用程序至关重要。Provider 作为 Google 推荐的状态管理工具，提供了一种简洁高效的方式来存储和管理应用程序的状态，避免了小部件之间手动传递数据的麻烦。

XXProvider：开箱即用的强大功能

Provider 提供了一系列开箱即用的 XXProvider，针对不同类型的状态管理提供了特定功能。了解这些 XXProvider 至关重要，因为它们可以简化状态管理，提升应用程序的可维护性。

常见的 XXProvider 类型

ChangeNotifierProvider： 用于与 ChangeNotifier 类关联的状态管理。
ValueListenableProvider： 用于与 ValueListenable 类关联的状态管理。
StreamProvider： 用于管理异步流的状态。
FutureProvider： 用于管理异步未来的状态。
SelectorProvider： 用于从现有 Provider 派生新状态。
FamilyProvider： 用于为多个相关小部件提供具有不同参数的相同类型状态。

实际应用

使用 ChangeNotifierProvider 管理状态

class Counter extends ChangeNotifier {
  int count = 0;
  void increment() {
    count++;
    notifyListeners();
  }
}

ChangeNotifierProvider(
  create: (context) => Counter(),
  child: MyWidget(),
);

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

使用 ValueListenableProvider 管理状态

class Counter extends ValueNotifier<int> {
  Counter() : super(0);
}

ValueListenableProvider(
  create: (context) => Counter(),
  child: MyWidget(),
);

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

使用 StreamProvider 管理异步流

StreamProvider(
  create: (context) => Stream.periodic(Duration(seconds: 1), (i) => i),
  child: MyWidget(),
);

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final stream = Provider.of<Stream<int>>(context);
    return StreamBuilder(
      stream: stream,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text('Count: ${snapshot.data}');
        } else {
          return Text('Loading...');
        }
      },
    );
  }
}

使用 FutureProvider 管理异步未来

FutureProvider(
  create: (context) => Future.delayed(Duration(seconds: 1), () => 42),
  child: MyWidget(),
);

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final future = Provider.of<Future<int>>(context);
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text('Count: ${snapshot.data}');
        } else {
          return Text('Loading...');
        }
      },
    );
  }
}

使用 SelectorProvider 派生新状态

SelectorProvider(
  selector: (context, counter, text) => counter.count.toString() + text,
  child: MyWidget(),
);

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final countText = Provider.of<String>(context);
    return Text('Count Text: $countText');
  }
}

使用 FamilyProvider 管理相关状态

FamilyProvider(
  create: (context, args) => Counter(args[0]),
  child: MyWidget(),
);

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