Flutter状态管理简化插件easystate的使用

Flutter状态管理简化插件easystate的使用

EasyState: 一个简单直观的状态管理包

EasyState 不仅仅是一个用户友好的状态管理器。它是一个旨在简化 Flutter 状态管理系统学习过程的工具。

许多 Flutter 开发者从使用 Provider 开始他们的旅程，但往往对其内部机制缺乏深入了解。在我使用 Flutter 的第三天，我决定创建一个更简单的替代品来帮助自己学习——于是，EasyState 应运而生。

在 EasyState 发布的四年里，我一直犹豫是否推荐用于生产应用，主要是因为我自己并没有在项目中使用它。然而，情况已经改变。最近，我强烈感觉到需要一个更简单状态管理工具。现在，我有信心在我的生产应用中使用 EasyState，并鼓励其他人体验它的简洁性和有效性。

状态管理在 Flutter 中的技巧

为什么我们需要一个状态管理器？

在 Flutter 中，setState() 是一个更新状态并触发小部件重建的函数。但是，它仅限于更新同一状态小部件内的小部件。如果你需要在不同屏幕上更新状态，setState() 将无法工作。

解决方案是拥有一个可以在应用程序任何地方访问的全局状态。该状态可以被更新，从而触发依赖于它的任何小部件的重建。虽然有多种实现方式，例如使用套接字事件或实时数据库事件，但状态管理是一种特别有效的解决方案。

状态管理工具提供了结构化的方式来管理全局状态，使得跨多个屏幕更新和响应状态变化变得更加容易。

安装

在 pubspec.yaml 文件中添加 EasyState：

dependencies:
  easystate: latest-version

如何使用

以下是最简单的使用 EasyState 的案例。

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

// 定义你的状态类，扩展(或混合) ChangeNotifier
class MyState extends ChangeNotifier {
  int count = 0;

  void increment() {
    count++;
    // 通知监听器以重建小部件。
    notifyListeners();
  }
}

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 提供你的状态模型
    return EasyState(
      state: MyState(),
      child: MaterialApp(
        home: const MyHomePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('EasyState 示例'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 构建你的小部件
          EasyStateBuilder<MyState>(builder: (context, state) {
            return Text(
              '我的计数: ${state.count}',
            );
          }),
          ElevatedButton(
            onPressed: () {
              EasyState.of<MyState>(context).increment();
            },
            child: Text("增加我的计数器"),
          ),
        ],
      ),
    );
  }
}

示例代码

以下是完整的示例代码：

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

class MyState extends ChangeNotifier {
  int count = 0;

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyState(
      state: MyState(),
      child: MaterialApp(
        home: const MyHomePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('EasyState 示例'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          EasyStateBuilder<MyState>(builder: (context, state) {
            return Text(
              '我的计数: ${state.count}',
            );
          }),
          ElevatedButton(
            onPressed: () {
              EasyState.of<MyState>(context).increment();
            },
            child: Text("增加我的计数器"),
          ),
        ],
      ),
    );
  }
}

常见的状态管理模式

1. 定义你的状态模型
2. 在应用程序中提供它
3. 注入构建器
4. 更新并通知监听器

监听事件

你可以使用 addListener 方法来监听模型的变化。如果上下文可能未准备好，可以延迟附加监听器。别忘了移除监听器。

class _ForumScreenState extends State<ForumScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    scheduleMicrotask(() {
      EasyState.of<AppState>(context).addListener(listener);
    });
  }

  listener() {
    // 处理逻辑
  }

  [@override](/user/override)
  void dispose() {
    EasyState.of<AppState>(context).removeListener(listener);
    super.dispose();
  }
}