Flutter状态管理插件unistate_adapter的使用

unistate_adapter 是一个轻量级的 Flutter 状态管理插件，它基于 Provider 和 ChangeNotifier 实现。它的主要目标是简化状态管理的代码，使得开发者可以更轻松地管理应用的状态。

安装

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

dependencies:
  flutter:
    sdk: flutter
  unistate_adapter: ^1.0.0

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

基本使用

1. 创建状态管理类

首先，你需要创建一个继承自 UniState 的类来管理你的状态。UniState 是一个 ChangeNotifier 的子类，因此你可以使用 notifyListeners() 来通知监听器状态的变化。

import 'package:unistate_adapter/unistate_adapter.dart';

class CounterState extends UniState {
  int _count = 0;

  int get count => _count;

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

2. 在 Widget 中使用状态

你可以使用 UniStateProvider 来提供状态，并使用 UniStateConsumer 来消费状态。

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

class CounterApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return UniStateProvider(
      create: (_) => CounterState(),
      child: MaterialApp(
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: UniStateConsumer<CounterState>(
          builder: (context, state) {
            return Text(
              'Count: ${state.count}',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final state = UniStateProvider.of<CounterState>(context);
          state.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

3. 运行应用

现在你可以运行应用，点击浮动按钮来增加计数器的值，并且 UI 会自动更新。

其他功能

unistate_adapter 还提供了一些其他功能，例如：

• UniStateSelector：允许你选择部分状态进行监听，避免不必要的重建。
• UniStateListener：允许你监听状态的变化，而不需要重建 UI。

使用 UniStateSelector

class CounterScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: UniStateSelector<CounterState, int>(
          selector: (state) => state.count,
          builder: (context, count) {
            return Text(
              'Count: $count',
              style: TextStyle(fontSize: 24),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final state = UniStateProvider.of<CounterState>(context);
          state.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

使用 UniStateListener

class CounterScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: UniStateListener<CounterState>(
          listener: (context, state) {
            // 当状态变化时执行某些操作
            print('Count changed to ${state.count}');
          },
          child: UniStateConsumer<CounterState>(
            builder: (context, state) {
              return Text(
                'Count: ${state.count}',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          final state = UniStateProvider.of<CounterState>(context);
          state.increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}