Preface

在所有的 app 前端中，我们基本上都会把 app 状态到变动反馈到 ui 上来。例如，服务器数据推送， locale 变更，主题变更等。此文在于学习在 flutter 中如何监听数据或者状态变动，然后将他们实时更新到 ui 上。

flutter.foundation.ChangeNotifier

ChangeNotifier 实现的是 flutter.foundation.Listenable ，它就是一个操作监听器的接口而已。监听器是用来通知客户端某对象已经更新过的。就包含两个需要实现的方法：

1 2	void addListener(VoidCallback listener); void removeListener(VoidCallback listener);

这个是ChangeNotifier最主要的成员变量

List<VoidCallback?> _listeners = List<VoidCallback?>.filled(0, null);
@protected
@visibleForTesting
@pragma('vm:notify-debugger-on-exception')
void notifyListeners()

其实和 js 的 api 非常像。 addListener 对应 addEventListener ,removeListener 对应 removeEventListener , notifyListeners 对应dispatchEvent 。

以下示范一下将 hello world 应用改为使用 ChangeNotifier ：

import 'package:flutter/material.dart';

class Counter extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  addCount() {
    _count++;
    notifyListeners();
  }
}

class ChangeNotifierPage extends StatefulWidget {
  const ChangeNotifierPage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<ChangeNotifierPage> createState() => _ChangeNotifierPageState();
}

class _ChangeNotifierPageState extends State<ChangeNotifierPage> {
  Counter _counter = Counter();
  @override
  void initState() {
    super.initState();
    _counter.addListener(() {
      setState(() {});
      if (kDebugMode) {
        print("counter value:${_counter.count}");
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    _counter.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _counter.addCount();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), 
    );
  }
}

ChangeNotifier 的实现比较简单，据说效率不是很好，一个项目最多使用1-2个，导致它不能在中，大型应用中使用。

Problems

extends,with,implements关键字的作用和区别

extends : 继承，和 java 没啥区别，就是继承的意思，可以直接调用父类的方法，可以重写父类的方法
with : 混入，其实就是复用 mixin ，可以直接调用 mixin 的方法，与 mixin 其实不是父子类的关系
implements : 实现，在其他语言里就是实现某某接口的关键字， dart 里面没有接口interface 这个关键字，所以直接实现 class 里面的方法

Reference

getx/doc/state_management

Ados

每天进步一点点025 - Flutter状态管理之ChangeNotifier

Preface

Contents

flutter.foundation.ChangeNotifier

Problems

extends,with,implements关键字的作用和区别

Reference