Flutter状态管理插件state_notifier的使用

概述

欢迎来到 state_notifier~
这个包是当你使用 Provider 或 Riverpod 时推荐的状态管理解决方案。

简而言之，与继承 ChangeNotifier 不同，你需要继承 StateNotifier：

class City {
  City({required this.name, required this.population});
  final String name;
  final int population;
}

class CityNotifier extends StateNotifier<List<City>> {
  CityNotifier() : super(const <City>[]);

  void addCity(City newCity) {
    state = [
      ...state,
      newCity,
    ];
  }
}

动机

StateNotifier 的目的是以不可变的方式控制状态。虽然 ChangeNotifier 简单易用，但其可变性使得在项目规模增大时更难以维护。通过使用不可变状态，可以更简单地：

• 比较前后的状态
• 实现撤销重做机制
• 调试应用程序状态

最佳实践

不要 在 Notifier 外部更新 StateNotifier 的状态

虽然你可以这样写：

class Counter extends StateNotifier<int> {
  Counter(): super(0);
}

final notifier = Counter();
notifier.state++;

但这被认为是反模式（你的 IDE 也会显示警告）。只有 StateNotifier 应该修改其状态。你应该使用方法来实现：

class Counter extends StateNotifier<int> {
  Counter(): super(0);

  void increment() => state++;
}

final notifier = Counter();
notifier.increment();

目标是将所有修改 StateNotifier 的逻辑集中在其内部。

FAQ

为什么当新旧状态相等时监听器仍然被调用？

StateNotifier 不使用 == 来验证状态是否变化，而是出于性能考虑使用 identical 进行比较。对于复杂对象，== 通常会执行深比较，这可能是一个昂贵的操作。因此，StateNotifier 使用 identical 来确保性能。

自定义通知过滤逻辑

你可以重写 updateShouldNotify(T old, T current) 方法来自定义行为，例如：

• 使用 == 而不是 identical 进行深度状态比较
• 始终返回 true 以恢复旧的行为

@Override
bool updateShouldNotify(User old, User current) {
  return old.name != current.name && old.age != current.age;
}

使用

与 Freezed 集成

虽然这是可选的，但推荐将 StateNotifier 与 Freezed 结合使用。Freezed 是一个用于 Dart 数据类的代码生成包，它自动生成 copyWith 方法并支持联合类型。

例如，使用 Freezed 定义数据、错误和加载状态：

@freezed
class MyState {
  factory MyState.data(Data data) = MyStateData;
  factory MyState.error(Object? error) = MyStateError;
  factory MyState.loading() = MyStateLoading;
}

然后可以使用 map 方法处理各种情况：

void main() {
  MyState state;
  state.when(
    data: (state) => print(state.data),
    loading: (state) => print('loading'),
    error: (state) => print('Error: ${state.error}'),
  );
}

与 Provider/服务定位器集成

StateNotifier 可以通过额外的 LocatorMixin 混入轻松与 provider 集成。例如：

class Count {
  Count(this.count);
  final int count;
}

class Counter extends StateNotifier<Count> with LocatorMixin {
  Counter(): super(Count(0));

  void increment() {
    state = Count(state.count + 1);
    read<LocalStorage>().writeInt('count', state.count);
  }
}

在 main.dart 中：

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider(create: (_) => LocalStorage()),
        StateNotifierProvider<Counter, Count>(create: (_) => Counter()),
      ],
      child: MyApp(),
    ),
  );
}

在 UI 中消费 Counter 和 Count：

@override
Widget build(BuildContext context) {
  int count = context.watch<Count>().count;

  return Scaffold(
    body: Text('$count'),
    floatingActionButton: FloatingActionButton(
      onPressed: () => context.read<Counter>().increment(),
      child: Icon(Icons.add),
    ),
  );
}

示例代码

下面是一个完整的示例代码，展示了如何使用 StateNotifier 和 provider 构建一个计数器应用，并且添加了动画效果。

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

// 定义状态
class MyState {
  final int count;
  MyState(this.count);
}

// 定义状态管理器
class MyStateNotifier extends StateNotifier<MyState> {
  MyStateNotifier() : super(MyState(0));

  void increment() {
    state = MyState(state.count + 1);
  }
}

// 定义日志记录器
abstract class Logger {
  void log(String message);
}

class ConsoleLogger implements Logger {
  @override
  void log(String message) {
    print(message);
  }
}

// 定义状态的动画
class MyStateTween extends Tween<MyState> {
  MyStateTween({MyState? begin, MyState? end}) : super(begin: begin, end: end);

  @override
  MyState lerp(double t) {
    final countTween = IntTween(begin: begin?.count, end: end?.count);
    return MyState(countTween.lerp(t));
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<Logger>(create: (_) => ConsoleLogger()),
        StateNotifierProvider<MyStateNotifier, MyState>(
          create: (_) => MyStateNotifier(),
          builder: (context, child) {
            return TweenAnimationBuilder<MyState>(
              duration: const Duration(milliseconds: 500),
              tween: MyStateTween(end: context.watch<MyState>()),
              builder: (context, state, _) {
                return Provider.value(value: state, child: child);
              },
            );
          },
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              context.select((MyState value) => value.count).toString(),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: context.watch<MyStateNotifier>().increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

这个示例展示了如何使用 StateNotifier 和 provider 构建一个带有动画效果的计数器应用。希望对你有所帮助！