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

Aim

通过将 Future 绑定到 State，当 State 被销毁时，所有绑定的 Future 将被取消。

Usage

方法 1: 使用 BindingHelper

步骤 1: 创建 BindingHelper 实例

BindingHelper _helper = BindingHelper();

步骤 2: 将 Future 绑定到 BindingHelper

future.bindLifecycle(_helper).then((...));

步骤 3: 在 State 销毁时释放 BindingHelper

[@override](/user/override)
void dispose() {
  super.dispose();
  _helper.dispose();
}

方法 2: 使用 mixin 在 State 中绑定

步骤 1: 在 State 中添加 mixin

import 'package:lifecycle_binding/lifecycle_binding.dart';
   
class _State extends State with StateLifecycleBinding

步骤 2: 将 Future 绑定到 State

future.bindLifecycleToState(this).then(() { ... });

Attention

1. 如果你这样使用 Future：

   future.then(() {
       // 部分 1
   });
   bindLifecycle(helper)
   .then(() {
       // 部分 2
   });
   

   • 部分 1 总会执行。
   • 部分 2 不会在 State 被销毁时执行。 因此，你应该将与 UI 相关的代码放在 部分 2 中。

Full Example

以下是一个完整的示例代码，展示了如何使用 BindingHelper 来管理生命周期：

import 'package:flutter/material.dart';
import 'package:flutter_lifecycle_binding/lifecycle_binding.dart';

class StatePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() {
    return _State();
  }
}

class _State extends State {
  String text = "如果5秒内退出了页面，我不会被更新，也不会有日志打印";

  BindingHelper _helper = BindingHelper();

  [@override](/user/override)
  void initState() {
    super.initState();
    // 延迟5秒后更新文本
    Future.delayed(const Duration(seconds: 5), () {
      return "我被更新了";
    }).bindLifecycle(_helper).then((value) {
      text = value;
      print(text);
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text(text),
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    // 释放 BindingHelper
    _helper.dispose();
  }
}

示例代码

以下是完整示例项目的代码，展示了如何在不同场景下使用该插件：

import 'package:flutter/material.dart';
import 'package:lifecycle_binding_example/state_page.dart';
import 'provider_page.dart';
import 'state_with_mixin_page.dart';

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

class HomeApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Builder(
          builder: (ctx) {
            return Container(
              child: Column(
                children: [
                  // 使用 BindingHelper 的按钮
                  RaisedButton(
                    onPressed: () {
                      Navigator.push(
                        ctx,
                        MaterialPageRoute(builder: (_) => StatePage()),
                      );
                    },
                    child: Text("使用 BindingHelper"),
                  ),
                  // 使用 mixin 的按钮
                  RaisedButton(
                    onPressed: () {
                      Navigator.push(
                        ctx,
                        MaterialPageRoute(builder: (_) => StateWithMixinPage()),
                      );
                    },
                    child: Text("使用 mixin StateLifecycleBinding"),
                  ),
                  // 在 provider 中使用的按钮
                  RaisedButton(
                    onPressed: () {
                      Navigator.push(
                        ctx,
                        MaterialPageRoute(builder: (_) => ProviderPage()),
                      );
                    },
                    child: Text("在 provider 中使用"),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}