Flutter快速切换功能插件quick_change的使用

quick_change 🧩

一个轻量级且直观的Flutter状态管理解决方案。

通过简单的类型安全的状态管理和强大的监听及构建能力，可以轻松地管理状态转换。

quick_change旨在简化Flutter应用中的状态管理，适合小型到中型的应用，并具有扩展到大型应用的灵活性。该包提供了易于使用的状态控制器、内置状态类型和直观的UI监听及构建能力。

特性 ✨

• 简单且轻量级：无需依赖大量库即可管理状态。
• 灵活的状态：使用预定义的状态如 QuickLoading、QuickData 和 QuickError。
• 简易的监听器：使用干净、直观的监听器API来响应状态变化。
• 模块化设计：适用于模块化和可扩展的Flutter应用。
• 优化性能：仅在必要时重建小部件。

目录 📚

• 安装
• 快速开始
• API概览
• 示例
  • 基本计数器示例
  • 监听错误
• 高级用法
  • 自定义状态类型
  • 中间件和日志记录
• 贡献
• 许可证

安装

在 pubspec.yaml 中添加 quick_change：

dependencies:
  quick_change: ^1.0.0

然后运行：

flutter pub get

快速开始 🚀

1. 定义一个 QuickChangeController 来管理你的状态。
2. 使用 QuickChangeBuilder 来监听状态变化并更新UI。
3. 使用 .quickListen 在不重建的情况下响应状态变化。

API概览

• QuickStateController：管理状态变化并通知监听器。
• 状态：
  • QuickInitial：代表初始状态。
  • QuickLoading：代表加载状态。
  • QuickData<T>：保存类型为 T 的数据。
  • QuickError：代表带有消息的错误状态。
• QuickStateBuilder：根据控制器的状态构建UI的小部件。
• .quickListen：在小部件上扩展，以监听状态变化而不重建。

示例

基本计数器示例

以下是使用 quick_change 创建一个简单的计数器的方法。

import 'package:quick_change/quick_change.dart';

class CounterController extends QuickChangeController<int> {

  void incrementCounter(int cVal) {
    int val = cVal + 1;
    setData(val);
  }

  void decrementCounter(int cVal) {
    int val = cVal - 1;
    setData(val);
  }
}

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

void main() {
  GetIt.I.registerLazySingleton<CounterController>(() => CounterController());
  runApp(const MyApp());
}

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

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

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

  @override
  CounterScreenState createState() => CounterScreenState();
}

class CounterScreenState extends State<CounterScreen> {
  CounterController counterController = GetIt.I<CounterController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Quick_State Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            QuickChangeBuilder<int>(
              controller: counterController,
              onLoading: (context) => const CircularProgressIndicator(),
              onData: (context, data) =>
                  Text('Counter: $data', style: const TextStyle(fontSize: 24)),
              onError: (context, message) => Text('Error: $message'),
            ),
            ElevatedButton(
              onPressed: () {
                final currentValue = counterController.currentData ?? 0;
                counterController.incrementCounter(currentValue);
              },
              child: const Text('Increment Counter'),
            ),
            ElevatedButton(
              onPressed: () {
                final currentValue = counterController.currentData ?? 0;
                counterController.decrementCounter(currentValue);
              },
              child: const Text('Decrement Counter'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => PostsScreen()));
              },
              child: const Text('Api Page'),
            ),
          ].quickListen<int>(
            controller: counterController,
            listener: (context, state) {
              if (state is QuickData) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Counter: ${state.data}'),
                    duration: const Duration(milliseconds: 400),
                  ),
                );
              }
              if (state is QuickError) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text(state.message)),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

监听错误

你可以使用 .quickListen 显示自定义消息（例如 SnackBar）当错误发生时。

// 监听错误
Widget.quickListen(
  controller: counterController,
  listener: (state) {
    if (state is QuickError) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(state.message)),
      );
    }
  },
);

高级用法

自定义状态类型

通过继承 QuickState 来定义自定义状态。

class QuickCustomSuccess extends QuickState {
  final String message;
  QuickCustomSuccess(this.message);
}

// 在控制器中使用自定义状态
quickFlux(QuickCustomSuccess("This is custom state"));