Flutter 中 Provider 的使用指南

[1.什么是 Provider](#1.什么是 Provider)

[2.如何安装 Provider](#2.如何安装 Provider)

3.基本使用方式

1.使用ChangeNotifierProvider提供状态

[2.使用 Provider.of 手动读取状态](#2.使用 Provider.of 手动读取状态)

[3.多Provider 的使用](#3.多Provider 的使用)

[4.常见的 Provider 类型](#4.常见的 Provider 类型)

在 Flutter 开发中，状态管理是一个常见的需求。Provider 是 Flutter 官方推荐的一种简单而强大的状态管理解决方案。本文将介绍 Provider 的基本用法和一些常见场景下的应用。

1.什么是 Provider

Provider 是一个 Flutter 的插件包，旨在简化状态管理和依赖注入。它使用 InheritedWidget 作为底层实现，通过提供一种订阅与更新的机制，能够让应用在状态变化时自动刷新对应的 UI，极大地提升了开发体验。

2.如何安装 Provider

在项目的 pubspec.yaml 文件中添加 Provider：

dependencies:

provider: ^6.1.2

然后执行以下命令安装依赖：

flutter pub get

3.基本使用方式

在使用 Provider 之前，我们需要定义一个简单的状态类。以下是一个计数器的示例：

Dart 复制代码

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{
  int _count = 0;
  int get count => _count;
  void increment(){
    _count++;
    notifyListeners();//通知监听者刷新
  }
}

在这里，Counter 类包含一个 count 属性和一个 increment 方法。ChangeNotifier 的 notifyListeners 方法会通知所有监听此对象的 Widget 更新界面。

1.使用ChangeNotifierProvider提供状态

在应用的根组件中使用 ChangeNotifierProvider，将 Counter 类实例注入到 Widget 树中，使整个应用都可以访问它的状态。

Dart 复制代码

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: const MyApp(),
    ),
  );
}

2. 使用 Consumer 或 Provider.of 读取状态

Dart 复制代码

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Consumer(builder: (context,counter,child){
              return Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              );
            }),

          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

在这个例子中，Consumer 会自动监听 Counter 对象的变化，并在 count 值更新时重建它内部的 UI。

2.使用 Provider.of 手动读取状态

Provider.of 可以用于获取 Provider 提供的对象。若不需要 UI 自动更新，可以使用 listen: false 参数，以避免不必要的重建。

floatingActionButton: FloatingActionButton(

onPressed: () {

Provider.of<Counter>(context, listen: false).increment();

},

child: Icon(Icons.add),

)

3.多Provider 的使用

当应用需要管理多个状态时，可以使用 MultiProvider 将多个状态注入 Widget 树中：

void main() {

runApp(

MultiProvider(

providers: [

ChangeNotifierProvider(create: (context) => Counter()),

ChangeNotifierProvider(create: (context) => AnotherModel()),

],

child: MyApp(),

),

);

}

4.常见的 Provider 类型

常见的Provider有以下几种类型：

Provider：适用于提供静态数据或单次创建的数据，例如配置文件、常量等。

ChangeNotifierProvider：用于响应式状态管理，结合 ChangeNotifier 使用，适合需要动态更新 UI 的场景。

FutureProvider：用于处理异步数据加载，可以绑定一个 Future 并将结果传递给子组件。 StreamProvider：监听数据流的变化，适合接收事件流的场景。

我们可以通过下面的例子看一下FutureProvider的用法：

假设我们有一个异步数据源，可以使用 FutureProvider 来处理：

Dart 复制代码

Future<String> fetchData() async {

  await Future.delayed(Duration(seconds: 2));

  return "从服务器获取的数据";

}



class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return FutureProvider<String>(

      create: (_) => fetchData(),

      initialData: "加载中...",

      child: MaterialApp(

        home: DataScreen(),

      ),

    );

  }

}



class DataScreen extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    final data = Provider.of<String>(context);

    return Scaffold(

      appBar: AppBar(title: Text("FutureProvider 示例")),

      body: Center(

        child: Text(data),

      ),

    );

  }

}