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

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

使用

1.1 准备生命周期环境

在应用中使用 LifecycleApp 包装默认的 App，并注册路由事件变化。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 LifecycleApp 包装默认 App
    return LifecycleApp(
      child: MaterialApp(
        title: 'Lifecycle Hook Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        navigatorObservers: [
          // 使用 LifecycleNavigatorObserver.hookMode() 来注册路由事件的变化
          LifecycleNavigatorObserver.hookMode(),
        ],
        home: const MyHomePage(title: 'Lifecycle Hook Home Page'),
      ),
    );
  }
}

PageView 和 TabBarView 应该被替换为 LifecyclePageView 和 LifecycleTabBarView。你也可以将项目包装在 LifecyclePageViewItem 中。更多详情可以参考 anlifecycle。

1.2 使用 useLifecycle 和 useLifecycleEffect

使用 useLifecycle 和 useLifecycleEffect 来处理生命周期相关的逻辑。

class HomeService {
  final Lifecycle lifecycle;
  final ValueNotifier<int> stayed = ValueNotifier<int>(0);

  HomeService(this.lifecycle) {
    // stayed ValueNotifier 绑定到生命周期，当生命周期销毁时会自动调用 [ValueNotifier.dispose]
    stayed.bindLifecycle(lifecycle);
  }

  void startTicker() {
    // 在可见的时间每秒增加1，不可见时不增加
    Stream.periodic(const Duration(seconds: 1))
        .bindLifecycle(lifecycle, repeatLastOnRestart: true)
        .listen((_) => stayed.value += 1);
  }
}

class HomeServiceDemo extends HookWidget {
  const HomeServiceDemo({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 单独使用lifecycle
    final homeService = useLifecycleEffect<HomeService>(
      factory2: HomeService.new,
      // 在首次可见时启动
      launchOnFirstResume: (_, service) => service.startTicker(),
    );
    // hooks 处理变化
    final stayed = useListenable(homeService.stayed);

    return Scaffold(
      appBar: AppBar(
        title: Text('Lifecycle Hook Demo Home Page'),
      ),
      body: Center(
        child: Text(
          'Stayed on this page for:${stayed.value} s',
        ),
      ),
    );
  }
}

1.3 使用 useLifecycleViewModelEffect 直接处理与 ViewModel 相关的功能

使用 useLifecycleViewModelEffect 来直接处理与 ViewModel 相关的功能。

class HomeViewModel with ViewModel {
  // 存放全局配置
  final AppViewModel appModel;

  // 创建一个自动管理的 ValueNotifier<int>
  late final counter = valueNotifier(0);

  // 可以从lifecycle中获取已存在的ViewModel
  HomeViewModel(Lifecycle lifecycle) : appModel = lifecycle.viewModelsByApp();

  void incrementCounter() {
    counter.value += appModel.incrementStep;
  }
}

class HomeViewModelDemo extends HookWidget {
  const HomeViewModelDemo({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用viewmodel
    final viewModel = useLifecycleViewModelEffect(factory2: HomeViewModel.new);

    // hooks 处理变化
    final counter = useListenable(viewModel.counter);

    return Scaffold(
      appBar: AppBar(
        title: Text('ViewModel Hook Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.value}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: const HomeFloatingButton(),
    );
  }
}

/// 模拟这是另一个widget 需要使用MyHomePage中的同一个ViewModel
class HomeFloatingButton extends HookWidget {
  const HomeFloatingButton({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 如果提前已经注册过或者确定已经存在对象则可以直接使用
    final vm = useLifecycleViewModelEffect<HomeViewModel>();
    return FloatingActionButton(
      onPressed: vm.incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}