Flutter数据通知插件value_notifier_tools的使用

value_notifier_tools 是一个轻量级的工具包，用于增强 ValueNotifier 的功能。它提供了多种扩展功能，如历史记录、选择监听和条件过滤等。以下是该插件的详细使用方法及示例。

安装 💻

首先，确保你的机器上已经安装了 Dart SDK。然后可以通过以下命令安装 value_notifier_tools：

dart pub add value_notifier_tools

特性

• HistoryValueNotifier：允许撤销和重做状态更改。
• SelectValueNotifier：选择并监听 ValueNotifier 的子集状态。
• WhereValueNotifier：通过自定义谓词来决定哪些状态更改应该传播给监听器。
• 无依赖：不依赖其他包，非常轻量。
• 易用性：易于集成到现有项目中。

HistoryValueNotifier 使用示例

直接使用

如果不需要额外的功能，可以直接使用 HistoryValueNotifier：

import 'package:history_value_notifier/history_value_notifier.dart';

final notifier = HistoryValueNotifier<int>(0);
notifier.value = 1;
print(notifier.undo()); // 输出 0
print(notifier.redo()); // 输出 1

升级现有的 ValueNotifier

你可以通过混合使用 HistoryValueNotifierMixin 来升级现有的 ValueNotifier：

class CounterNotifier extends ValueNotifier<int> with HistoryValueNotifierMixin<int> {
  CounterNotifier() : super(0) {
    maxHistoryLength = 30; // 设置历史记录的最大长度
  }

  void increment() => ++state;

  void decrement() => --state;

  void reset() => temporaryState = 0; // 不会存储在历史记录中

  @override
  int transformHistoryState(int newState, int currentState) {
    return newState;
  }
}

创建 HistoryValueNotifier

你也可以直接创建一个 HistoryValueNotifier：

class CounterNotifier extends HistoryValueNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => ++state;
  void decrement() => --state;
}

使用

// 假设我们通过 Provider 或 GetIt 获得了 notifier
final CounterNotifier notifier = context.read(counterNotifier);

notifier.increment(); // 状态变为 1
notifier.undo(); // 撤销，状态变为 0
notifier.redo(); // 重做，状态变为 1

notifier.decrement(); // 状态变为 0
notifier.undo(); // 撤销，状态变为 1
print(notifier.canRedo); // true
notifier.increment(); // 状态变为 2
print(notifier.canRedo); // false

SelectValueNotifier 使用示例

使用便捷的 select 扩展方法

final notifier = ValueNotifier({'a': 1, 'b': 2});

return ValueListenableBuilder<int>(
  valueListenable: notifier.select((value) => value['a']),
  builder: (context, value, child) {
    return Text(value.toString());
  },
);

在这个例子中，ValueListenableBuilder 只会在 'a' 的值改变时重建。

WhereValueNotifier 使用示例

使用 where 扩展方法

final notifier = ValueNotifier(0);

return ValueListenableBuilder<int>(
  valueListenable: notifier.where((oldState, newState) => newState > oldState),
  builder: (context, value, child) {
    return Text(value.toString());
  },
);

这个例子中，Widget 只有在新状态大于旧状态时才会重建。

扩展自定义类

class IncreasingValueNotifier<T> extends WhereValueNotifier<T> {
  IncreasingValueNotifier(super.value);

  @override
  bool updateShouldNotify(T oldState, T newState) {
    return oldState < newState;
  }
}

通过扩展 WhereValueNotifier 并重写 updateShouldNotify 方法，可以实现更复杂的逻辑。

完整示例 Demo

下面是一个完整的示例，展示了如何结合这些功能在一个简单的计数器应用中使用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ValueNotifier Tools Example')),
        body: Center(child: Counter()),
      ),
    );
  }
}

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  final CounterNotifier _counter = CounterNotifier();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ValueListenableBuilder<int>(
          valueListenable: _counter,
          builder: (context, value, child) {
            return Text('Count: $value');
          },
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ElevatedButton(
              onPressed: () => _counter.increment(),
              child: Text('Increment'),
            ),
            ElevatedButton(
              onPressed: () => _counter.decrement(),
              child: Text('Decrement'),
            ),
            ElevatedButton(
              onPressed: () => _counter.undo(),
              child: Text('Undo'),
            ),
            ElevatedButton(
              onPressed: () => _counter.redo(),
              child: Text('Redo'),
            ),
          ],
        )
      ],
    );
  }
}

class CounterNotifier extends HistoryValueNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => ++state;
  void decrement() => --state;
}

这个示例展示了一个简单的计数器应用，用户可以增加或减少计数值，并且可以撤销和重做操作。希望这些内容对你有所帮助！