flutter provider状态管理使用-优快云博客

本文链接：https://blog.youkuaiyun.com/getapi/article/details/147028694

在 Flutter 中，Provider 是一个轻量级且易于使用的状态管理工具，它基于 InheritedWidget，并提供了一种高效的方式来管理和共享应用中的状态。相比其他复杂的状态管理方案（如 Bloc 或 Riverpod），Provider 更加简单直观，适合中小型项目。

以下是一个完整的示例，展示如何使用 Provider 进行状态管理。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0 # 确保使用最新版本

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

flutter pub get

2. 创建数据模型和状态管理类

我们创建一个简单的计数器示例，展示如何通过 Provider 管理状态。

定义 Counter 模型

创建一个文件 counter_provider.dart：

import 'package:flutter/material.dart';

// 定义一个 ChangeNotifier 类来管理状态
class Counter with ChangeNotifier {
  int _count = 0;

  // 获取当前计数值
  int get count => _count;

  // 增加计数值
  void increment() {
    _count++;
    notifyListeners(); // 通知监听器更新 UI
  }

  // 减少计数值
  void decrement() {
    _count--;
    notifyListeners(); // 通知监听器更新 UI
  }
}

ChangeNotifier 是 Provider 提供的一个基类，用于管理状态并通知监听器。
调用 notifyListeners() 方法会触发所有监听该状态的 Widget 更新。

3. 设置 Provider

在应用的顶层设置 Provider，以便在整个应用中访问状态。

修改 main.dart

创建一个文件 main.dart：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_provider.dart'; // 导入状态管理类

void main() {
  runApp(
    // 使用 ChangeNotifierProvider 包裹整个应用
    ChangeNotifierProvider(
      create: (context) => Counter(), // 初始化状态管理对象
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Provider 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Provider 状态管理')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '当前计数值:',
              style: TextStyle(fontSize: 20),
            ),
            // 使用 Consumer 监听状态变化
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              // 获取状态管理对象并调用方法
              Provider.of<Counter>(context, listen: false).increment();
            },
            child: const Icon(Icons.add),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              // 获取状态管理对象并调用方法
              Provider.of<Counter>(context, listen: false).decrement();
            },
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

4. 代码说明

ChangeNotifierProvider：
- 在 main.dart 中，使用 ChangeNotifierProvider 包裹整个应用。
- create 回调函数用于初始化状态管理对象（这里是 Counter）。
Consumer：
- Consumer 是一个高效的监听器，用于监听状态的变化并更新 UI。
- 在 builder 方法中，可以访问到最新的状态值（counter.count）。
Provider.of：
- 使用 Provider.of<Counter>(context, listen: false) 获取状态管理对象。
- 设置 listen: false 表示不监听状态变化（通常用于触发事件的地方，如按钮点击）。
状态更新：
- 调用 increment() 或 decrement() 方法时，notifyListeners() 会通知所有监听器重新构建相关的 Widget。

5. 测试与运行

运行项目后，你会看到一个简单的计数器界面：

点击 “+” 按钮，计数值增加。
点击 “-” 按钮，计数值减少。

6. 可选优化

多状态管理：如果需要管理多个状态，可以使用 MultiProvider 将多个 Provider 组合在一起。
异步数据加载：可以在 Provider 中处理异步操作（如网络请求），并通过状态变量（如 isLoading）控制加载状态。
Scoped Provider：如果某些状态只在特定页面中使用，可以将 Provider 包裹在该页面的 Widget 树中，而不是整个应用。

示例：使用 MultiProvider

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
        ChangeNotifierProvider(create: (_) => AnotherModel()),
      ],
      child: const MyApp(),
    ),
  );
}