Flutter 状态管理新境界：多Provider并行驱动UI

2024-08-01 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Flutter 状态管理新境界：多Provider并行驱动UI

前言

在上一篇文章中，我们讨论了如何使用 Provider 在 Flutter 中进行状态管理。

本篇文章我们来讨论如何使用多个 Provider。

在 Flutter 中，使用 Provider 管理多个不同的状态时，你可以为每个状态创建一个单独的 ChangeNotifierProvider，并在需要的地方使用 Provider.of<T>(context) 或 Consumer<T>来访问这些状态。

接下来让我们正式开始使用：

为每个状态创建类

为每个需要管理的状态创建一个类，并确保这些类继承自 ChangeNotifier。

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}
class ThemeSwitcher with ChangeNotifier {
  bool _isDarkTheme = false;
  bool get isDarkTheme => _isDarkTheme;
  void toggleTheme() {
    _isDarkTheme = !_isDarkTheme;
    notifyListeners();
  }
}

在应用的根或需要的地方提供状态

使用 ChangeNotifierProvider 来包裹你的应用或特定的 widget，并为每个状态提供一个 create 函数来创建其对应的实例。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        ChangeNotifierProvider(create: (context) => ThemeSwitcher()),
      ],
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}
在

 widget 中访问状态

使用 Provider.of<T>(context) 或 Consumer<T> 在需要的地方访问状态。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    final themeSwitcher = Provider.of<ThemeSwitcher>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Providers Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            Switch(
              value: themeSwitcher.isDarkTheme,
              onChanged: (value) {
                themeSwitcher.toggleTheme();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

更新状态

在状态类中修改属性，并调用 notifyListeners() 来通知所有监听这个状态的 widget 进行更新。

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();  // 通知所有监听这个状态的widget进行更新
  }
}
class ThemeSwitcher with ChangeNotifier {
  bool _isDarkTheme = false;
  bool get isDarkTheme => _isDarkTheme;
  void toggleTheme() {
    _isDarkTheme = !_isDarkTheme;
    notifyListeners();  // 通知所有监听这个状态的widget进行更新
  }
}

完整示例

下面是一个例子，展示了如何使用 Provider 来管理两个不同的状态:

代码如下（示例）：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Counter()),
        ChangeNotifierProvider(create: (context) => ThemeSwitcher()),
      ],
      child: MaterialApp(
        home: MyHomePage(),
      ),
    );
  }
}
class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}
class ThemeSwitcher with ChangeNotifier {
  bool _isDarkTheme = false;
  bool get isDarkTheme => _isDarkTheme;
  void toggleTheme() {
    _isDarkTheme = !_isDarkTheme;
    notifyListeners();
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    final themeSwitcher = Provider.of<ThemeSwitcher>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Providers Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            Switch(
              value: themeSwitcher.isDarkTheme,
              onChanged: (value) {
                themeSwitcher.toggleTheme();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}