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

发布于 1周前 作者 sinazl 来自 Flutter

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

1. 简介

1.1 描述

flutter_lifecycle 基于原生平台Android/iOS的生命周期理念,在Flutter上实现了一个生命周期系统。开发者可以在任何需要的地方感知StatefulWidget的生命周期。

/// 生命周期状态枚举
enum LifecycleState {
  /// 初始化阶段触发
  onInit,

  /// 创建并首次渲染帧时触发
  onCreate,

  /// 开始或重新可见时触发
  onStart,

  /// 重新交互时触发
  onResume,

  /// 不可交互但可见时触发
  onPause,

  /// 不可见且不可交互时触发
  onStop,

  /// 销毁时触发
  onDestroy;
}

1.2 图解

生命周期图

2. 使用

2.1 添加依赖

pubspec.yaml文件中添加flutter_lifecycle_aware依赖。

dependencies:
  # flutter 生命周期
  flutter_lifecycle_aware: ^0.0.3

2.2 创建观察者

在任何需要监控StatefulWidget生命周期的地方继承LifecycleObserver并实现onLifecycleChanged方法。

/// 在需要监控 StatefulWidget 生命周期的地方
class AViewModel extends LifecycleObserver {
  /// 需要释放的资源
  ScrollController controller = ScrollController();

  /// 初始化数据
  void initData() {}

  /// 销毁/释放资源
  void destroy() {
    controller.dispose();
  }

  /// 生命周期回调监听器
  [@override](/user/override)
  void onLifecycleChanged(LifecycleOwner owner, LifecycleState state) {
    if (state == LifecycleState.onCreate) {
      initData();
    } else if (state == LifecycleState.onDestroy) {
      destroy();
    }
  }
}

2.3 使用生命周期并绑定观察者对象

StatefulWidget中混入Lifecycle,并绑定LifecycleObserver以实现生命周期感知。

/// 在 StatefulWidget 中混入 Lifecycle 并绑定 LifecycleObserver
class _MyPageState extends State<MyPage> with Lifecycle {
  [@override](/user/override)
  void initState() {
    super.initState();

    /// 绑定 LifecycleObserver
    getLifecycle().addObserver(AViewModel());
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container();
  }
}

2.4 辅助配置

MaterialApp中添加辅助配置LifecycleRouteObserver.routeObserver

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      /// 生命周期辅助设置
      navigatorObservers: [LifecycleRouteObserver.routeObserver],
      home: const MyPage(),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_lifecycle_aware插件进行生命周期管理的示例代码。flutter_lifecycle_aware插件允许你的组件(通常是StatefulWidget)感知Flutter的Widget生命周期事件,如initStatedispose等,但提供更细粒度的控制。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加flutter_lifecycle_aware依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_lifecycle_aware: ^2.0.0  # 请检查最新版本号

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

2. 创建一个LifecycleAwareWidget

接下来,创建一个实现LifecycleAware接口的StatefulWidget。在这个例子中,我们将创建一个简单的Widget,它将在不同的生命周期事件中打印消息。

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

class LifecycleAwareExample extends StatefulWidget {
  @override
  _LifecycleAwareExampleState createState() => _LifecycleAwareExampleState();
}

class _LifecycleAwareExampleState extends State<LifecycleAwareExample> with LifecycleAware {
  @override
  void initState() {
    super.initState();
    print("initState called");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Aware Example'),
      ),
      body: Center(
        child: Text('Check your console for lifecycle messages'),
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    print("didChangeDependencies called");
  }

  @override
  void didUpdateWidget(covariant LifecycleAwareExample oldDelegate) {
    super.didUpdateWidget(oldDelegate);
    print("didUpdateWidget called");
  }

  @override
  void deactivate() {
    super.deactivate();
    print("deactivate called");
  }

  @override
  void dispose() {
    print("dispose called");
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print("AppLifecycleState changed to: $state");
  }
}

3. 使用LifecycleAwareMixin(可选)

如果你不想手动实现LifecycleAware接口,可以使用LifecycleAwareMixin来简化代码。这个mixin提供了生命周期事件的默认实现,你可以根据需要重写它们。

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

class LifecycleAwareExampleWithMixin extends StatefulWidget {
  @override
  _LifecycleAwareExampleWithMixinState createState() => _LifecycleAwareExampleWithMixinState();
}

class _LifecycleAwareExampleWithMixinState extends State<LifecycleAwareExampleWithMixin> with LifecycleAwareMixin {
  @override
  void initState() {
    super.initState();
    print("initState called");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Aware Example with Mixin'),
      ),
      body: Center(
        child: Text('Check your console for lifecycle messages'),
      ),
    );
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    print("AppLifecycleState changed to: $state");
  }
}

4. 运行你的应用

现在,你可以运行你的Flutter应用,并观察控制台输出,以查看生命周期事件何时被触发。

总结

flutter_lifecycle_aware插件提供了一个简单的方法来管理Flutter Widget的生命周期。无论是通过实现LifecycleAware接口还是使用LifecycleAwareMixin,你都可以更轻松地处理生命周期事件,从而在适当的时候执行你的代码逻辑。

回到顶部