Flutter状态通知插件change_notifier的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter状态通知插件change_notifier的使用

支持检测对象何时发生变更并接收通知。

有两种类型的状态通知器：

  • AsyncChangeNotifier：在一段时间内持续接收事件流的通知。
  • ChangeNotifier：在变更发生的那一刻接收通知。这是从Flutter核心直接提取的ChangeNotifier。

该库的一些建议用途包括：

  • 监视对象的变化，并在变化发生时记录下来。
  • 在自己的API和库中优化可观察集合，而不是进行差异比较。
  • 通过监听流来实现简单的数据绑定。

使用方法

有两种一般的方法来检测变化：

  • 监听ChangeNotifier.changes并在对象变化时接收通知。
  • 使用Differ.diff来确定两个对象之间的变化。

以下是一个完整的示例，演示如何使用ChangeNotifier在Flutter应用中实现状态通知。

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

// 定义一个ChangeNotifier子类
class Counter with ChangeNotifier {
  int _count = 0;

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

  // 增加计数
  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听者
  }
}

void main() {
  runApp(
    // 使用ChangeNotifierProvider将Counter实例传递给应用
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Change Notifier Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({required this.title});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示当前计数
            Text('You have pushed the button this many times:'),
            Consumer<Counter>(
              builder: (context, counter, child) => Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 增加计数
          Provider.of<Counter>(context, listen: false).increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，change_notifier 是 Flutter 中用于状态管理的一个常用工具，通常与 Provider 包一起使用。下面是一个完整的示例，展示如何在 Flutter 中使用 ChangeNotifier 进行状态通知。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 provider 依赖：

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

然后运行 flutter pub get 来获取依赖。

2. 创建 ChangeNotifier 类

接下来，创建一个 ChangeNotifier 类来管理你的状态。例如，我们创建一个简单的计数器类：

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();  // 通知监听者状态已更改
  }
}

3. 在应用中提供 ChangeNotifierProvider

在你的应用的主文件中（通常是 main.dart），使用 ChangeNotifierProvider 来提供你的 ChangeNotifier 实例：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart';  // 假设你把上面的 Counter 类放在 counter.dart 文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterScreen(),
    );
  }
}

4. 使用 Consumer 或 Selector 访问状态

在你的 UI 组件中，你可以使用 Consumer 或 Selector 来访问和监听 ChangeNotifier 的状态。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter.dart';

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ChangeNotifier Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<Counter>(
              builder: (context, counter, child) => Text(
                '${counter.count}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final counter = Provider.of<Counter>(context, listen: false);
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中，Consumer<Counter> 用于访问 Counter 实例的 count 属性，并在 count 发生变化时自动更新 UI。同时，我们使用 Provider.of<Counter>(context, listen: false) 来在按钮点击时调用 increment 方法，而不需要监听状态变化（因为我们只是触发状态变化，不需要立即重建 UI）。

这就是一个使用 ChangeNotifier 进行状态管理的完整示例。通过这种方式，你可以轻松地在 Flutter 应用中管理状态，并在状态发生变化时自动更新 UI。

回到顶部