Flutter动画效果插件CatFlow的使用

CatFlow

Flutter 超轻量级状态管理工具。

语言

English
中文

特性

• 轻量级
• 非侵入式状态管理
• 简单易用

开始使用

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  cat_flow: ^版本号

然后运行 flutter pub get 来安装。

导入

在 Dart 文件中导入 CatFlow：

import 'package:cat_flow/cat.dart';

使用示例

以下是一个完整的示例，展示如何使用 CatFlow 来实现状态管理和视图更新。

示例代码

import 'package:flutter/material.dart';
import 'package:cat_flow/cat.dart';

// 创建一个控制器类
class MyController extends CatController {
  // 使用 CatRx 包裹状态数据
  CatRx<int> count = CatRx<int>(0);

  // 修改状态的方法
  void changeCount() {
    count.value++; // 更新状态值
    count.update(); // 手动通知视图更新
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CatFlow 示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: TestPage(),
    );
  }
}

class TestPage extends StatefulWidget {
  [@override](/user/override)
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  // 初始化控制器
  final MyController controller = MyController();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 在页面初始化时调用控制器的 onInit 方法
    controller.onInit();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CatFlow 示例'),
      ),
      body: Center(
        child: CatView.render(
          controller.count, // 绑定状态
          (context) => Text(
            controller.count.value.toString(), // 显示状态值
            style: TextStyle(fontSize: 48),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 调用控制器方法修改状态
          controller.changeCount();
        },
        tooltip: '增加计数',
        child: Icon(Icons.add),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 页面销毁时调用控制器的 onClose 方法
    controller.onClose();
    super.dispose();
  }
}

文档

CatRx

初始化数据

CatRx<int> count = CatRx<int>(0); // 初始化整型状态
CatRx<bool> isLoading = CatRx<bool>(false); // 初始化布尔型状态

更新数据并触发视图更新

count.value += 1; // 直接更新值

如果数据是对象类型，在修改后需要手动调用 update()：

foo.value.name = "bar"; // 修改对象属性
foo.update(); // 手动通知视图更新

CatHook

useEffect

监听数据变化并响应数据更新：

CatHook.useEffect(() {
  print("count 改变");
  return Text(
    controller.count.value.toString(),
    style: TextStyle(fontSize: 80),
  );
}, [controller.count, controller.people]);

CatController

基本用法

class MyController extends CatController {
  CatRx<int> count = CatRx<int>(0);

  [@override](/user/override)
  void onClose() {
    super.onClose();
    print("关闭控制器");
  }

  [@override](/user/override)
  void onInit() {
    super.onInit();
    print("初始化控制器");
  }
}

在页面生命周期中调用

class TemplatePageState extends State<TemplatePage> {
  MyController controller = MyController();

  [@override](/user/override)
  void initState() {
    super.initState();
    controller.onInit(); // 页面初始化时调用
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("示例页面")),
    );
  }

  [@override](/user/override)
  void dispose() {
    controller.onClose(); // 页面销毁时调用
    super.dispose();
  }
}