Flutter多变更通知插件multiple_change_notifiers的使用

Flutter多变更通知插件multiple_change_notifiers的使用

multiple_change_notifiers 是一个非常实用的 Flutter 插件，它提供了多种类型的 ChangeNotifier，可以帮助开发者轻松管理多个状态变化。本文将通过一个完整的示例，展示如何在 Flutter 中使用该插件。

安装插件

首先，在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  multiple_change_notifiers: ^1.0.0

然后运行以下命令以安装插件：

flutter pub get

使用示例

我们将创建一个简单的示例，展示如何使用 multiple_change_notifiers 来管理两个不同的状态。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultiChangeNotifierProvider(
        providers: [
          ChangeNotifierProvider<Counter>(create: (_) => Counter()),
          ChangeNotifierProvider<Timer>(create: (_) => Timer()),
        ],
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Change Notifiers Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示计数器状态
            Consumer<Counter>(
              builder: (context, counter, child) => Text(
                'Count: ${counter.count}',
                style: TextStyle(fontSize: 24),
              ),
            ),
            SizedBox(height: 20),
            // 按钮用于增加计数器
            Consumer<Counter>(
              builder: (context, counter, child) => ElevatedButton(
                onPressed: () => counter.increment(),
                child: Text('Increment Counter'),
              ),
            ),
            SizedBox(height: 20),
            // 显示计时器状态
            Consumer<Timer>(
              builder: (context, timer, child) => Text(
                'Time: ${timer.elapsedSeconds} seconds',
                style: TextStyle(fontSize: 24),
              ),
            ),
            SizedBox(height: 20),
            // 按钮用于重置计时器
            Consumer<Timer>(
              builder: (context, timer, child) => ElevatedButton(
                onPressed: () => timer.reset(),
                child: Text('Reset Timer'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 自定义计数器类
class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

// 自定义计时器类
class Timer with ChangeNotifier {
  int _elapsedSeconds = 0;

  int get elapsedSeconds => _elapsedSeconds;

  void start() {
    Future.doWhile(() async {
      await Future.delayed(Duration(seconds: 1));
      _elapsedSeconds++;
      notifyListeners();
      return _elapsedSeconds < 10; // 计时器持续10秒
    });
  }

  void reset() {
    _elapsedSeconds = 0;
    notifyListeners();
  }
}

更多关于Flutter多变更通知插件multiple_change_notifiers的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter多变更通知插件multiple_change_notifiers的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


multiple_change_notifiers 是一个 Flutter 插件，它允许你管理多个 ChangeNotifier 实例，并在它们发生变化时通知监听者。这个插件特别适用于需要同时管理多个状态的情况，比如在复杂的应用中，你可能需要多个独立的 ChangeNotifier 来管理不同的状态。

安装

首先，你需要在 pubspec.yaml 文件中添加 multiple_change_notifiers 依赖：

dependencies:
  flutter:
    sdk: flutter
  multiple_change_notifiers: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

  1. 创建 ChangeNotifier 类

    首先，你需要创建一些 ChangeNotifier 类。这些类将用于管理不同的状态。

    import 'package:flutter/material.dart';

class CounterNotifier extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class ThemeNotifier extends ChangeNotifier {
  bool _isDark = false;

  bool get isDark => _isDark;

  void toggleTheme() {
    _isDark = !_isDark;
    notifyListeners();
  }
}

  2. 使用 MultipleChangeNotifier

    MultipleChangeNotifier 是一个容器，用于管理多个 ChangeNotifier 实例。你可以将多个 ChangeNotifier 添加到 MultipleChangeNotifier 中，并在需要时通知监听者。

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

void main() {
  final counterNotifier = CounterNotifier();
  final themeNotifier = ThemeNotifier();

  final multipleNotifier = MultipleChangeNotifier();
  multipleNotifier.addChangeNotifier(counterNotifier);
  multipleNotifier.addChangeNotifier(themeNotifier);

  runApp(MyApp(multipleNotifier: multipleNotifier));
}

class MyApp extends StatelessWidget {
  final MultipleChangeNotifier multipleNotifier;

  MyApp({required this.multipleNotifier});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiple Change Notifiers Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: multipleNotifier.get<ThemeNotifier>().isDark ? ThemeMode.dark : ThemeMode.light,
      home: MyHomePage(multipleNotifier: multipleNotifier),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final MultipleChangeNotifier multipleNotifier;

  MyHomePage({required this.multipleNotifier});

  @override
  Widget build(BuildContext context) {
    final counterNotifier = multipleNotifier.get<CounterNotifier>();
    final themeNotifier = multipleNotifier.get<ThemeNotifier>();

    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Change Notifiers Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Counter: ${counterNotifier.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
            ElevatedButton(
              onPressed: () {
                counterNotifier.increment();
              },
              child: Text('Increment Counter'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                themeNotifier.toggleTheme();
              },
              child: Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

  3. 监听状态变化

    你可以使用 MultipleChangeNotifier 来监听多个 ChangeNotifier 的状态变化。当任何一个 ChangeNotifier 发生变化时，MultipleChangeNotifier 都会通知监听者。

    class MyHomePage extends StatelessWidget {
  final MultipleChangeNotifier multipleNotifier;

  MyHomePage({required this.multipleNotifier});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Change Notifiers Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ListenableBuilder(
              listenable: multipleNotifier,
              builder: (context, _) {
                final counterNotifier = multipleNotifier.get<CounterNotifier>();
                final themeNotifier = multipleNotifier.get<ThemeNotifier>();

                return Column(
                  children: [
                    Text(
                      'Counter: ${counterNotifier.count}',
                      style: Theme.of(context).textTheme.headline4,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        counterNotifier.increment();
                      },
                      child: Text('Increment Counter'),
                    ),
                    SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () {
                        themeNotifier.toggleTheme();
                      },
                      child: Text('Toggle Theme'),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部