Flutter插件oak_tree的介绍与使用

在Flutter开发中，管理状态是一个常见的需求。本文将探索一个名为oak_tree的插件，它提供了一种简单且解耦的状态管理模式。通过该插件，您可以轻松实现复杂的业务逻辑管理，并将其与视图绑定，从而简化开发流程。

功能概述

oak_tree`是一个专注于依赖注入的轻量级状态管理库。它的核心特点包括：

• 解耦状态管理：无需手动传递状态或回调函数，即可实现状态更新。
• 灵活的状态管理：支持两种状态类型——通用的 viewState 和自定义的 internalState。
• 简单易用：只需四个步骤即可快速上手。

插件oak_tree的使用步骤

以下是使用 oak_tree 的详细步骤及示例代码。

第一步：初始化插件

在 main.dart 文件中添加初始化代码，以便设置状态管理器的注入机制。

void main() async {
  await setupOakTree(callback: () {
    // 我们将在第四步中完成此处配置
  });
  runApp(const MyApp());
}

第二步：创建状态管理器

状态管理器是一个简单的类，继承自 BaseManager。以下是一个简单的示例，展示了如何创建一个计数器管理器。

import 'package:oak_tree/oak_tree.dart';

class TestManager extends BaseManager {
  int counter = 0;

  void increase() async {
    setViewState(ViewState.busy); // 更新视图状态为繁忙
    counter++; // 增加计数器
    await Future.delayed(const Duration(seconds: 2)); // 模拟耗时操作
    setViewState(ViewState.idle); // 更新视图状态为空闲
  }
}

第三步：创建视图并绑定管理器

接下来，我们创建一个视图，将视图与管理器绑定在一起。通过 BaseView 小部件，可以轻松访问管理器的状态和方法。

import 'package:flutter/material.dart';
import 'package:oak_tree/oak_tree.dart';
import 'package:test_app/test_manager.dart';

class TestView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BaseView<TestManager>(
      builder: (BuildContext context, TestManager manager, _) {
        if (manager.viewState.isBusy) {
          return const CircularProgressIndicator(); // 显示加载动画
        }

        return Column(
          children: [
            Text('Counter: ${manager.counter}'), // 显示计数器值
            TextButton(
              onPressed: () {
                manager.increase(); // 调用增加计数器的方法
              },
              child: const Text('Tap to increase'), // 按钮文本
            ),
          ],
        );
      },
    );
  }
}

第四步：注册管理器

最后，在 setupOakTree 函数中注册管理器，使其可以在整个应用中被访问。

void main() async {
  await setupOakTree(callback: () {
    oak.registerLazySingleton(() => TestManager()); // 注册管理器
  });
  runApp(const MyApp());
}

完整示例代码

以下是完整的示例代码，结合了上述所有步骤。

// main.dart
import 'package:flutter/material.dart';
import 'package:oak_tree/oak_tree.dart';
import 'package:test_app/test_manager.dart';
import 'package:test_app/test_view.dart';

void main() async {
  await setupOakTree(callback: () {
    oak.registerLazySingleton(() => TestManager()); // 注册管理器
  });
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestView(), // 主页面
    );
  }
}

// test_manager.dart
import 'package:oak_tree/oak_tree.dart';

class TestManager extends BaseManager {
  int counter = 0;

  void increase() async {
    setViewState(ViewState.busy); // 设置繁忙状态
    counter++; // 增加计数器
    await Future.delayed(const Duration(seconds: 2)); // 模拟耗时操作
    setViewState(ViewState.idle); // 设置空闲状态
  }
}

// test_view.dart
import 'package:flutter/material.dart';
import 'package:oak_tree/oak_tree.dart';
import 'package:test_app/test_manager.dart';

class TestView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BaseView<TestManager>(
      builder: (BuildContext context, TestManager manager, _) {
        if (manager.viewState.isBusy) {
          return const CircularProgressIndicator(); // 加载动画
        }

        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: ${manager.counter}'), // 显示计数器值
            TextButton(
              onPressed: () {
                manager.increase(); // 调用增加计数器的方法
              },
              child: const Text('Tap to increase'), // 按钮文本
            ),
          ],
        );
      },
    );
  }
}