使用颤振 HookWidget 和 didChangeAppLifecycleState

Question

如何使用 HookWidget 从特定页面监控应用程序的生命周期状态，就像使用 Stateful widget 一样？

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    if (state == AppLifecycleState.paused) {
         ...
    }
    if (state == AppLifecycleState.resumed) {
        ...
    }
    if (state == AppLifecycleState.detached) {
       ...
    }
  }

Answer 1

在文档here 中搜索“创建钩子的方法”。您将看到有 2 种创建钩子的方法，使用函数或使用类。您将选择“使用课程”。然后使用 initHook 覆盖作为您的 initState 和 dispose 的工作方式相同。这就是我最终实现它的方式。

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

useWidgetLifecycleObserver(BuildContext context) {
  return use(const _WidgetObserver());
}

class _WidgetObserver extends Hook<void> {
  const _WidgetObserver();

  @override
  HookState<void, Hook<void>> createState() {
    return _WidgetObserverState();
  }
}

class _WidgetObserverState extends HookState<void, _WidgetObserver> with WidgetsBindingObserver {
  @override
  void build(BuildContext context) {}

  @override
  void initHook() {
    super.initHook();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print("app state now is $state");
    super.didChangeAppLifecycleState(state);
  }
}

然后

class Root extends HookWidget {

  @override
  Widget build(BuildContext context) {
    useWidgetLifecycleObserver(context);

Answer 2

首先创建一个类：

class MyObserver implements WidgetsBindingObserver {
}

然后创建它并注册它：

Widget build(BuildContext) {
  useEffect(() {
    final observer = MyObserver();
    WidgetsBinding.instance.addObserver(observer);
    return () => WidgetsBinding.instance.removeObserver(observer);
  }, const []);

  ...
}

Answer 3

Flutter hooks 附带一个内置的 didchangeapplifecycle 按如下方式访问它

    final appLifecycleState = useAppLifecycleState();

    useEffect(() {
      print("current app state");
      print(appLifecycleState);
      if (appLifecycleState == AppLifecycleState.paused || appLifecycleState == AppLifecycleState.inactive) {
        //...
      } else if (appLifecycleState == AppLifecycleState.resumed) {
        //...
      }
      return null;
    }, [appLifecycleState]);

Answer 4

我刚刚不得不处理同样的问题。这是我使用自定义钩子的解决方案：

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

AppLifecycleState useAppLifecycleState() {
  return use(const _LifeCycleState());
}

class _LifeCycleState extends Hook<AppLifecycleState> {
  const _LifeCycleState();

  @override
  __LifeCycleState createState() => __LifeCycleState();
}

class __LifeCycleState extends HookState<AppLifecycleState, _LifeCycleState>
    with WidgetsBindingObserver {
  AppLifecycleState _theState;

  @override
  void initHook() {
    super.initHook();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    setState(() {
      _theState = state;
    });
  }

  @override
  AppLifecycleState build(BuildContext context) {
    return _theState;
  }

  @override
  void dispose() {
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
  }
}

并且在您想要访问应用生命周期状态的HookWidget 中使用 useEffect ：

final appLifecycleState = useAppLifecycleState();

useEffect(() {
  print("current app state");
  print(appLifecycleState);
  if (appLifecycleState == AppLifecycleState.paused ||
      appLifecycleState == AppLifecycleState.inactive) {
    //...
  } else if (appLifecycleState == AppLifecycleState.resumed) {
    //...
  }
  return null;
}, [appLifecycleState]);