Flutter状态管理插件eazy_state的使用

Flutter状态管理插件eazy_state的使用

简介

Eazy State Management 是一个轻量级且易于使用的状态管理解决方案，适用于 Flutter 应用。它旨在高效地管理和更新用户界面的状态，而无需复杂的状态管理工具带来的额外开销。

特性

• EazyState: 用于管理单个状态值，并通过流的方式提供更新。
• EazyBuilder: 当状态发生变化时，自动重建自身，利用了 StreamBuilder 的能力。
• 极简API: 易于理解和集成到任何 Flutter 项目中。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  eazy_state: ^0.1.1

然后运行 flutter pub get 来安装该包。

使用

EazyState

EazyState 是一个类，用于存储状态值并提供更新流。它允许你管理状态并在状态变化时通知监听者。

import 'package:eazy_state/eazy_state.dart';

final counterState = EazyState(0);

void incrementCounter() {
  counterState.value += 1;
}

EazyBuilder

EazyBuilder 是一个小部件，当 EazyState 的值发生变化时会重新构建自身。它监听 EazyState 的流，并根据当前状态值重建 UI。

import 'package:flutter/widgets.dart';
import 'package:eazy_state/eazy_state.dart';

class CounterWidget extends StatelessWidget {
  final EazyState<int> counterState;

  const CounterWidget({required this.counterState});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EazyBuilder<int>(
      state: counterState,
      builder: (context, count) {
        return Text('$count');
      },
    );
  }
}

示例

示例 1: 在多个地方使用相同的状态

在这个例子中，我们将展示如何在不同的页面之间共享同一个状态。

final counterState = EazyState(10.0);

class MyEazyPage extends StatelessWidget {
  const MyEazyPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Flutter Demo Home Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            EazyBuilder(
              state: counterState,
              builder: (context, count) {
                return Text(
                  '$count',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const MyEazyPageSecond(),
                  ),
                );
              },
              child: const Text("Move"),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterState.value += 1,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

示例 2: 在单个屏幕中使用状态

在这个例子中，我们将展示如何在一个单独的屏幕上使用状态。

class MyEazyPage extends StatefulWidget {
  const MyEazyPage({super.key});

  [@override](/user/override)
  State<MyEazyPage> createState() => _MyEazyPageState();
}

class _MyEazyPageState extends State<MyEazyPage> {
  final counterState = EazyState(10);

  [@override](/user/override)
  void dispose() {
    counterState.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            EazyBuilder(
              state: counterState,
              builder: (context, count) {
                return Text(
                  '$count',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const MyEazyPageSecond(),
                  ),
                );
              },
              child: const Text('Move'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counterState.value += 1,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}