如何在ChangeNotifer中使用Flutter钩子

问题描述

假设我们有一个ChangeNotifer的复杂模型，那么当模型更改时我应该如何自动更新UI？

这是我想出的，但是看起来很奇怪，对吗，有没有更好的方法呢？

class Playground extends HookWidget {
  const Playground({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("built");

    final dataState = useState(DataClass(0));
    final data = useListenable(dataState.value);

    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),),body: ListView(
        children: [
          ListTile(
            title: Text("data: ${data.cnt}"),onTap: () {
              data.cnt++;
            },],);
  }
}

class DataClass with ChangeNotifier {
  int _cnt;
  int get cnt => _cnt;
  set cnt(int val) {
    _cnt = val;
    notifyListeners();
  }

  DataClass(int cnt) : _cnt = cnt;
}

ps：类似useStateListenable或useListenableProvider

解决方法

您可以将useState和useListenable组合成useListenableState

T useListenableState<T extends ChangeNotifier>(T data) {
  final state = useState<T>(data);
  return useListenable(state.value);
}

class Playground extends HookWidget {
  const Playground({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print("built");

    final data = useListenableState(DataClass(0));

    return Scaffold(
      appBar: AppBar(
        title: Text('Title'),),body: ListView(
        children: [
          ListTile(
            title: Text("data: ${data.cnt}"),onTap: () {
              data.cnt++;
            },],);
  }
}

class DataClass with ChangeNotifier {
  int _cnt;
  int get cnt => _cnt;
  set cnt(int val) {
    _cnt = val;
    notifyListeners();
  }

  DataClass(int cnt) : _cnt = cnt;
}