Flutter生命周期管理插件Lifecycle Controller的使用

Lifecycle Controller

Lifecycle Controller 是一个专门为Flutter设计的库，旨在减少与ChangeNotifier模式相关的样板代码。通过利用Provider作为底层库，Lifecycle Controller简化了状态管理和生命周期处理，使开发者能够更轻松地构建健壮、可扩展且易于维护的Flutter应用。

🌟 为什么选择Lifecycle Controller?

在Flutter中管理状态和生命周期事件时，尤其是当使用ChangeNotifier模式与Provider结合时，可能会涉及大量的样板代码。随着应用的增长，保持UI和业务逻辑之间的清晰分离变得至关重要。Lifecycle Controller通过以下方式解决了这些问题：

• 减少样板代码：消除了与ChangeNotifier模式相关的重复代码，使你可以专注于应用逻辑。
• 简化状态管理：提供了一个基于Provider的干净架构来管理本地状态，而不会产生不必要的开销。
• 处理生命周期事件：提供了内置方法来处理屏幕生命周期事件，如导航变化和应用生命周期状态。
• 增强可维护性：促进了关注点分离，使你的代码库更加整洁，更容易维护。
• 自定义UI组件：允许轻松自定义加载和错误屏幕以匹配你的应用设计。
• 高效的订阅管理：简化了流订阅处理，防止内存泄漏。
• 防抖和节流：提供了方法来防抖和节流操作以优化性能。

Lifecycle Controller与其他状态管理库的区别在于，它提供了分离小部件与业务逻辑所需的必要功能，例如加载状态管理、高效的订阅处理以及方便的防抖和节流函数。这些内置功能简化了复杂的状态管理和性能优化，使其更容易实现。

📥 安装

在你的pubspec.yaml文件中添加Lifecycle Controller：

dependencies:
  lifecycle_controller: latest_version
  provider: latest_version

然后运行：

flutter pub get

🛠️ 入门指南

Step 1: 创建一个控制器

通过继承LifecycleController创建一个控制器。这个控制器将管理你的屏幕的状态和逻辑。

class CounterController extends LifecycleController {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    // 使用`asyncRun`自动处理加载状态和错误
    asyncRun(() async {
      await Future.delayed(const Duration(seconds: 1));
      _counter++;
      notifyListeners(); // 通知监听器重建UI
    });
  }

  @override
  void onInit() {
    super.onInit();
    // 初始化逻辑
    print('CounterController initialized');
  }

  @override
  void onDispose() {
    super.onDispose();
    // 清理逻辑
    print('CounterController disposed');
  }
}

Step 2: 设置LifecycleScope

使用LifecycleScope创建一个控制器。在这个LifecycleScope内，你可以通过Provider包提供的方法使用自定义创建的控制器。

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

  @override
  Widget build(BuildContext context) {
    return LifecycleScope.create(
      builder: (context) {
        final controller = context.read<CounterController>();
        final counter = context.select<CounterController, int>(
          (value) => value.counter,
        );
        return Scaffold(
          appBar: AppBar(title: const Text('Counter Example')),
          body: Center(
            child: Text(
              'Count: $counter',
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: controller.increment,
            child: const Icon(Icons.add),
          ),
        );
      },
      create: () => CounterController(),
    );
  }
}

📖 详细指南

状态管理与Provider

Lifecycle Controller利用Provider包的强大功能进行状态管理。它会自动设置必要的Provider基础设施，使你可以在屏幕上轻松访问控制器的状态。

访问控制器状态

使用context.read、context.watch或context.select访问控制器及其状态：

// 读取控制器实例（不监听更改）
final controller = context.read<CounterController>();

// 监听控制器的所有更改（任何更改都会导致重建）
final counter = context.watch<CounterController>().counter;

// 选择并监听特定属性（适用于性能优化）
final counter = context.select<CounterController, int>(
  (controller) => controller.counter,
);

💡 提示：当你只想监听特定属性时，使用context.select可以优化性能并防止不必要的重建。

生命周期钩子

Lifecycle Controller提供了多个生命周期钩子，你可以在控制器中覆盖这些钩子以响应各种生命周期事件：

class MyController extends LifecycleController {
  @override
  void onInit() {
    super.onInit();
    // 控制器初始化时调用
  }

  @override
  void onDispose() {
    super.onDispose();
    // 控制器被销毁时调用
  }

  @override
  void onDidPush() {
    super.onDidPush();
    // 屏幕被压入导航堆栈时调用
  }

  @override
  void onDidPop() {
    super.onDidPop();
    // 屏幕从导航堆栈中弹出时调用
  }

  @override
  void onDidPushNext() {
    super.onDidPushNext();
    // 一个新的屏幕被压在当前屏幕之上时调用
  }

  @override
  void onDidPopNext() {
    super.onDidPopNext();
    // 当前屏幕之上的屏幕被弹出时调用
  }

  @override
  void onResumed() {
    super.onResumed();
    // 应用从后台恢复时调用
  }

  @override
  void onInactive() {
    super.onInactive();
    // 应用变为非活动状态时调用
  }

  @override
  void onPaused() {
    super.onPaused();
    // 应用暂停时调用
  }

  @override
  void onDetached() {
    super.onDetached();
    // 应用分离时调用
  }
}

如果你想要使用与路由相关的onDidPop等方法，必须设置RouteObserver。

Widget build(BuildContext context) {
  ...
  return new MaterialApp(
    ...
    navigatorObservers: <NavigatorObserver>[
      LifecycleController.basePageRouteObserver,
    ],
    ...
  );
}

异步操作处理

使用asyncRun方法轻松管理异步任务。它会自动处理加载状态和错误管理。

class DataController extends LifecycleController {
  List<String> _items = [];

  List<String> get items => _items;

  void fetchData() {
    asyncRun(() async {
      // 模拟网络请求
      await Future.delayed(const Duration(seconds: 2));
      _items = ['Item 1', 'Item 2', 'Item 3'];
      notifyListeners(); // 更新UI
    });
  }
}

在你的小部件中，你可以根据控制器的状态显示加载指示器或错误消息。

@override
Widget build(BuildContext context, DataController controller) {
  if (controller.isLoading) {
    return const Center(child: CircularProgressIndicator());
  } else if (controller.isError) {
    return Center(child: Text('Error: ${controller.errorMessage}'));
  } else {
    return ListView(
      children: controller.items.map((item) => ListTile(title: Text(item))).toList(),
    );
  }
}

自定义UI组件

自定义加载视图

覆盖buildLoading方法以提供自定义加载UI。

class MyWidget extends LifecycleWidget<MyController> {
  @override
  Widget buildLoading(BuildContext context, MyController controller) {
    return const Center(
      child: CircularProgressIndicator(color: Colors.red),
    );
  }
}

自定义错误视图

覆盖buildError方法以自定义错误UI。

class MyWidget extends LifecycleWidget<MyController> {
  @override
  Widget buildError(BuildContext context, MyController controller) {
    return Center(
      child: Text(
        'Oops! ${controller.errorMessage}',
        style: TextStyle(color: Colors.red, fontSize: 18),
      ),
    );
  }
}

订阅管理

使用内置方法高效管理流订阅，防止内存泄漏。

添加订阅

使用addSubscription方法添加由控制器管理的订阅。

class MyController extends LifecycleController {
  void listenToStream(Stream<int> stream) {
    final subscription = stream.listen((data) {
      // 处理传入的数据
    });
    addSubscription(subscription);
  }
}

取消订阅

所有添加的订阅会在控制器被销毁时自动取消。如有需要，你也可以手动取消订阅。

// 取消特定订阅
await cancelSubscription(subscription);

// 取消所有订阅
await cancelSubscriptionAll();

防抖动作

使用debounce方法防止函数被频繁调用。

class SearchController extends LifecycleController {
  void onSearchChanged(String query) {
    debounce(const Duration(milliseconds: 500), () {
      // 执行搜索
    }, id: 'search');
  }
}

节流动作

使用throttle方法限制函数的调用频率。

class ScrollController extends LifecycleController {
  void onScroll(double offset) {
    throttle(const Duration(milliseconds: 200), () {
      // 处理滚动偏移量
    }, id: 'scroll');
  }
}