Flutter状态管理插件hook_state的使用

Flutter状态管理插件hook_state的使用

hook_state 是一个受 React hooks 和 flutter_hooks 包启发的 Flutter 状态管理包。它提供了类似 hooks 的体验，但不需要额外的自定义小部件，允许你仅使用 StatefulWidget 以声明性和响应式的方式管理复杂的状态。

安装

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  hook_state: ^latest_version

然后运行以下命令来安装包：

flutter pub add hook_state

基本示例

下面是一个使用 hook_state 管理计数器的完整示例。我们将创建一个 StatefulWidget，并在其 State 中使用 HookStateMixin 混入，以便可以使用 hooks 方法。

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

class ExampleWidget extends StatefulWidget {
  [@override](/user/override)
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> with HookStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用 useNotifier 创建一个 ValueNotifier 并返回其值
    final counter = useNotifier<int>(0);

    return Scaffold(
      appBar: AppBar(
        title: Text('Hook Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pressed the button this many times:'),
            Text(
              '${counter.value}', // 显示计数器的当前值
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.value += 1; // 增加计数器的值
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

可用的 Hooks

hook_state 提供了多种 hooks 来帮助你管理不同类型的状态。以下是一些常用的 hooks：

创建自定义 Hooks

你可以通过扩展 Hook 类并使用扩展方法来创建自定义 hooks。以下是一个为 GlobalKey 创建自定义 hook 的示例。

实现自定义 Hook

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

extension CustomHookStateExtension on HookState {
  /// 注册一个 GlobalKeyHook 来管理 GlobalKey。
  /// 返回创建的 GlobalKey。
  GlobalKey<T> useGlobalKey<T extends State<StatefulWidget>>() {
    final hook = GlobalKeyHook<T>();
    return use(hook).key;
  }
}

class GlobalKeyHook<T extends State<StatefulWidget>> extends Hook<GlobalKey<T>> {
  late final GlobalKey<T> key;

  GlobalKeyHook();

  [@override](/user/override)
  void init() {
    key = GlobalKey<T>();
  }

  [@override](/user/override)
  void dispose() {
    // GlobalKey 不需要被销毁。
  }
}

使用自定义 Hook

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

class ExampleCustomHookWidget extends StatefulWidget {
  [@override](/user/override)
  _ExampleCustomHookWidgetState createState() => _ExampleCustomHookWidgetState();
}

class _ExampleCustomHookWidgetState extends State<ExampleCustomHookWidget> with HookStateMixin {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 使用自定义的 useGlobalKey hook 获取 GlobalKey
    final key = useGlobalKey<_CustomWidgetState>();

    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Hook Example'),
      ),
      body: Center(
        child: CustomWidget(key: key),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 调用 CustomWidget 的 doSomething 方法
          key.currentState?.doSomething();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

class CustomWidget extends StatefulWidget {
  CustomWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  _CustomWidgetState createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  void doSomething() {
    print('Doing something!');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      child: Text('Custom Widget'),
    );
  }
}