Flutter状态管理插件flutter_zustand的使用

Flutter应用程序的状态管理是开发过程中不可或缺的一部分，它确保了UI与业务逻辑之间的同步。flutter_zustand是一个为Flutter开发者提供的轻量级、快速且可扩展的状态管理解决方案，其灵感来源于JavaScript社区中的zustand库。

什么是flutter_zustand？

Bear Flutter Logo

flutter_zustand是一个小巧、快速且可扩展的基本状态管理方案，它基于简化的Flux原则构建。该库提供了舒适的API接口，并尽量减少样板代码和强制性的设计模式。

⚠️ 注意：此包处于早期阶段，API可能会发生变化。

flutter_zustand的优势

简单而不具约束性
减少样板代码
不依赖于上下文访问存储
只需一次包裹整个应用程序

与其他流行的状态管理库（如Bloc, Riverpod, Provider）相比，flutter_zustand具有更少的样板代码，同时支持无需上下文即可访问存储的能力。

使用步骤

第一步：将应用包裹在作用域内

为了让zustand能够通知小部件重建，首先需要将你的应用程序包裹在一个StoreScope中。

void main() {
  runApp(const StoreScope(child: MyApp()));
}

第二步：创建一个存储

接下来定义一个继承自Store<T>的类来表示你的存储。在这个例子中，我们创建了一个名为BearStore的存储，用于跟踪熊的数量。

class BearStore extends Store<int> {
  BearStore() : super(0);

  void increasePopulation() => set(state + 1);
  void removeAllBears() => set(0);
}

BearStore useBearStore() => create(() => BearStore());

第三步：绑定小部件

最后，在任何地方使用这个存储。通过调用或选择其中的数据，当数据变化时，相关的小部件将会自动重建。

Widget build(BuildContext context) {
  final bears = useBearStore().select(context, (state) => state);
  return ElevatedButton(
    onPressed: useBearStore().increasePopulation,
    child: Text('Bears: $bears'),
  );
}

示例项目结构

为了更好地理解如何在实际项目中使用flutter_zustand，这里提供了一个简单的示例程序结构，包括计数器和待办事项列表两个页面。

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

void main() {
  runApp(const StoreScope(child: MyApp()));
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class DemoTile extends StatelessWidget {
  const DemoTile({
    super.key,
    required this.title,
    required this.builder,
  });

  final Widget title;
  final WidgetBuilder builder;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: title,
      trailing: const Icon(Icons.arrow_forward_ios),
      onTap: () {
        Navigator.of(context).push(MaterialPageRoute(
          builder: builder,
        ));
      },
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("Zustand Examples"),
      ),
      body: ListView(
        children: [
          DemoTile(
            title: const Text("Counter"),
            builder: (context) => const CounterPage(),
          ),
          DemoTile(
            title: const Text("Todo List"),
            builder: (context) => const TodoListPage(),
          ),
        ],
      ),
    );
  }
}

以上就是关于flutter_zustand的基本介绍以及如何在Flutter项目中使用它的指南。希望这些信息对你有所帮助！如果你有任何问题或者想要了解更多细节，请随时查阅官方文档或参与GitHub上的讨论。

更多关于Flutter状态管理插件flutter_zustand的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•2 天前

更多关于Flutter状态管理插件flutter_zustand的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用flutter_zustand进行状态管理的代码示例。flutter_zustand是一个受Zustand启发的轻量级状态管理库，专为Flutter设计。它允许你创建可观察的状态存储，并在UI组件中订阅这些状态的变化。

首先，确保你已经在pubspec.yaml文件中添加了flutter_zustand依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_zustand: ^x.y.z  # 请替换为最新版本号

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

接下来是一个简单的示例，展示了如何使用flutter_zustand来管理一个计数器的状态：

1. 创建状态存储

首先，我们需要创建一个状态存储。在这个例子中，我们将创建一个简单的计数器存储。

import 'package:flutter_zustand/flutter_zustand.dart';

// 定义一个createStore函数来创建我们的状态存储
Store<CounterState> createStore() => create((set) => ({
  count: 0,
  increment: () => set((state) => state.copyWith(count: state.count + 1)),
  decrement: () => set((state) => state.copyWith(count: state.count - 1)),
}));

// 定义计数器的状态类
class CounterState {
  final int count;
  const CounterState({required this.count});

  CounterState copyWith({int? count}) {
    return CounterState(count: count ?? this.count);
  }
}

2. 在UI中使用状态存储

接下来，我们将在Flutter的UI组件中使用这个状态存储。我们将创建一个简单的界面，显示计数器的当前值，并提供增加和减少计数器的按钮。

import 'package:flutter/material.dart';
import 'package:flutter_zustand/flutter_zustand.dart';
import 'counter_store.dart';  // 假设上面的代码保存在counter_store.dart文件中

void main() {
  runApp(Provider(
    create: createStore,
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Zustand Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CounterPage(),
    );
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Zustand Example'),
      ),
      body: Selector<CounterState, int>(
        selector: (state) => state.count,
        builder: (context, count, child) {
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$count',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          );
        },
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () => context.read<CounterState>().increment(),
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
          SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () => context.read<CounterState>().decrement(),
            tooltip: 'Decrement',
            child: Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们使用Provider组件来包装我们的应用，并通过createStore函数创建状态存储。CounterPage组件使用Selector组件来订阅计数器的count状态，并在UI中显示它。同时，我们使用context.read<CounterState>().increment()和context.read<CounterState>().decrement()方法来更新计数器的状态。

这样，你就创建了一个简单的Flutter应用，使用flutter_zustand来管理计数器的状态。希望这个示例对你有所帮助！