在flutter的狀態(tài)管理中,ValueNotifier會被經(jīng)常使用,一般會和ValueListenableBuilder一起使用.ValueNotifier負(fù)責(zé)狀態(tài),ValueListenableBuilder負(fù)責(zé)嵌套組件來刷新

ValueNotifier<int> type = ValueNotifier(0);

ValueListenableBuilder(
  valueListenable: type,
  builder: (context, type, child) {
    return Text(type.toString());
  },
);

這篇文章就來深度剖析一下這個組件內(nèi)部的具體實現(xiàn)原理
首先我們從ValueNotifier入手,它的繼承關(guān)系

class ValueNotifier<T> extends ChangeNotifier implements ValueListenable<T>

mixin class ChangeNotifier implements Listenable

abstract class ValueListenable<T> extends Listenable

Listenable

最終根源是節(jié)點是Listenable,它提供了addListener,removeListener,用來添加監(jiān)聽和移除監(jiān)聽

ChangeNotifier

再來看ChangeNotifier,這個類在我們使用Provider的時候也是會經(jīng)常用到,并且很多的controller會是它的子類,比如常用的ScrollController,TabController.ChangeNotifier要實現(xiàn)Listenable的方法

void addListener(VoidCallback listener) {
   assert(ChangeNotifier.debugAssertNotDisposed(this));
   if (kFlutterMemoryAllocationsEnabled) {
     maybeDispatchObjectCreation(this);
   }
   if (_count == _listeners.length) {
     if (_count == 0) {
       _listeners = List<VoidCallback?>.filled(1, null);
     } else {
       final List<VoidCallback?> newListeners =
           List<VoidCallback?>.filled(_listeners.length * 2, null);
       for (int i = 0; i < _count; i++) {
         newListeners[i] = _listeners[i];
       }
       _listeners = newListeners;
     }
   }
   _listeners[_count++] = listener;
}

@override
  void removeListener(VoidCallback listener) {
    for (int i = 0; i < _count; i++) {
      final VoidCallback? listenerAtIndex = _listeners[i];
      if (listenerAtIndex == listener) {
        if (_notificationCallStackDepth > 0) {
          _listeners[i] = null;
          _reentrantlyRemovedListeners++;
        } else {
          _removeAt(i);
        }
        break;
      }
    }
  }

ChangeNotifier內(nèi)部提供_listeners,用來存放監(jiān)聽的回調(diào),來實現(xiàn)上面兩個函數(shù),主要作用是來操作_listeners添加刪除回調(diào)函數(shù)
ChangeNotifier特色函數(shù)notifyListeners

void notifyListeners() {
    assert(ChangeNotifier.debugAssertNotDisposed(this));
    if (_count == 0) {
      return;
    }
    _notificationCallStackDepth++;

    final int end = _count;
    for (int i = 0; i < end; i++) {
      try {
        _listeners[i]?.call();
      } catch (exception, stack) {
        FlutterError.reportError(FlutterErrorDetails(
          exception: exception,
          stack: stack,
          library: 'foundation library',
          context: ErrorDescription('while dispatching notifications for $runtimeType'),
          informationCollector: () => <DiagnosticsNode>[
            DiagnosticsProperty<ChangeNotifier>(
              'The $runtimeType sending notification was',
              this,
              style: DiagnosticsTreeStyle.errorProperty,
            ),
          ],
        ));
      }
    }

    _notificationCallStackDepth--;

    if (_notificationCallStackDepth == 0 && _reentrantlyRemovedListeners > 0) {
      final int newLength = _count - _reentrantlyRemovedListeners;
      if (newLength * 2 <= _listeners.length) {
        final List<VoidCallback?> newListeners = List<VoidCallback?>.filled(newLength, null);

        int newIndex = 0;
        for (int i = 0; i < _count; i++) {
          final VoidCallback? listener = _listeners[i];
          if (listener != null) {
            newListeners[newIndex++] = listener;
          }
        }

        _listeners = newListeners;
      } else {
        // Otherwise we put all the null references at the end.
        for (int i = 0; i < newLength; i += 1) {
          if (_listeners[i] == null) {
            // We swap this item with the next not null item.
            int swapIndex = i + 1;
            while (_listeners[swapIndex] == null) {
              swapIndex += 1;
            }
            _listeners[i] = _listeners[swapIndex];
            _listeners[swapIndex] = null;
          }
        }
      }

      _reentrantlyRemovedListeners = 0;
      _count = newLength;
    }
  }

大段代碼不想看,其實可以只關(guān)注

final int end = _count;
for (int i = 0; i < end; i++) {
  _listeners[i]?.call();
}

主要是調(diào)用監(jiān)聽的回調(diào)函數(shù),剩下的部分是對_listeners的優(yōu)化,在執(zhí)行完所有的回調(diào)函數(shù)后,才對_listeners進行長度變更,對應(yīng)removeListener,在_notificationCallStackDepth > 0的時候,并沒有對數(shù)組長度進行優(yōu)化,而是在回調(diào)結(jié)束后,才進行的優(yōu)化
比如只需要監(jiān)聽一次結(jié)果,然后在回調(diào)中移除了監(jiān)聽,這里如果正好在_listeners長度變化的節(jié)點上,需要重新開辟內(nèi)存,此時可能是出于性能的優(yōu)化,并不會在回調(diào)執(zhí)行過程中做數(shù)組的內(nèi)存變更,統(tǒng)一在所有回調(diào)結(jié)束后去操作,還有一種情況是我的回調(diào)函數(shù)很多,移除的也很多,可能會出現(xiàn)多次開辟內(nèi)存的情況,而最后統(tǒng)一處理,最多只需要開辟一次內(nèi)存,這個就屬于很細節(jié)的操作了
到這里,我們結(jié)束了對ChangeNotifier剖析

ValueListenable

abstract class ValueListenable<T> extends Listenable {
  /// Abstract const constructor. This constructor enables subclasses to provide
  /// const constructors so that they can be used in const expressions.
  const ValueListenable();

  /// The current value of the object. When the value changes, the callbacks
  /// registered with [addListener] will be invoked.
  T get value;
}

ValueListenable就是在Listenable基礎(chǔ)上添加了get value也是一個基類

ValueNotifier

在講解完上面的部分后,再來說ValueNotifier就相對容易些了

class ValueNotifier<T> extends ChangeNotifier implements ValueListenable<T> {
  ValueNotifier(this._value);

  @override
  T get value => _value;

  T _value;

  set value(T newValue) {
    if (_value == newValue) {
      return;
    }
    _value = newValue;
    notifyListeners();
  }

  @override
  String toString() => '${describeIdentity(this)}($value)';
}

接口類ValueListenable中的添加刪除監(jiān)聽的實現(xiàn),被ValueNotifier的父類ChangeNotifier實現(xiàn)了,ValueListenable增加了成員變量_value,并且實現(xiàn)了ValueListenable的get value,重點是在set value中
調(diào)用了父類notifyListeners(),用來調(diào)用監(jiān)聽回調(diào)函數(shù),所以我們在最開始的例子中,直接執(zhí)行type.value++,就可以直接通知到被監(jiān)聽對象了

ValueListenableBuilder

這個組件是Widget組件,用來包裹需要刷新的組件,是一個StatefulWidget

typedef ValueWidgetBuilder<T> = Widget Function(BuildContext context, T value, Widget? child);
class ValueListenableBuilder<T> extends StatefulWidget {
  final ValueListenable<T> valueListenable;
  final ValueWidgetBuilder<T> builder;
  final Widget? child;
}

valueListenable抽象成了ValueListenable,所以所有實現(xiàn)了ValueListenable方法的類都可以使用這個組件來進行刷新
具體看下它的 State _ValueListenableBuilderState

class _ValueListenableBuilderState<T> extends State<ValueListenableBuilder<T>> {
  late T value;

  @override
  void initState() {
    super.initState();
    value = widget.valueListenable.value;
    widget.valueListenable.addListener(_valueChanged);
  }

  @override
  void didUpdateWidget(ValueListenableBuilder<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.valueListenable != widget.valueListenable) {
      oldWidget.valueListenable.removeListener(_valueChanged);
      value = widget.valueListenable.value;
      widget.valueListenable.addListener(_valueChanged);
    }
  }

  @override
  void dispose() {
    widget.valueListenable.removeListener(_valueChanged);
    super.dispose();
  }

  void _valueChanged() {
    setState(() { value = widget.valueListenable.value; });
  }

  @override
  Widget build(BuildContext context) {
    return widget.builder(context, value, widget.child);
  }
}

• initState中添加監(jiān)聽addListener -> _valueChanged
• dispose中移除監(jiān)聽removeListener -> _valueChanged
• _valueChanged,就是簡單的setState刷新組件
• didUpdateWidget是在widget重新構(gòu)建后調(diào)用,如果監(jiān)聽對象變了,需要移除之前的監(jiān)聽,并且添加新的監(jiān)聽
  到這里,關(guān)于ValueNotifier的內(nèi)容就結(jié)束了,但是我們試想一下,如果一個widget組件需要監(jiān)聽多個valueListenable,如何做到,一種方式是ValueListenableBuilder嵌套,能解決問題,但是不是很優(yōu)雅
  完全可以根據(jù)上邊的原理,我們實現(xiàn)一套多監(jiān)聽的組件

final ValueListenable<T> valueListenable 變?yōu)?final List<ValueListenable> valueListenables;

將之前的單個valueListenable添加回調(diào)變成數(shù)組遍歷添加回調(diào),移除亦然,關(guān)于didUpdateWidget中對數(shù)組中的每個元素作比較這個方法很多,可以選擇

void initState() {
    super.initState();
    value = widget.valueListenables;
    _addListener(widget);
}

@override
  void dispose() {
    _removeListener(widget);
    super.dispose();
  }

  _addListener(ValueListenableListBuilder widget) {
    for (var element in widget.valueListenables) {
      element.addListener(_valueChanged);
    }
  }

  _removeListener(ValueListenableListBuilder widget) {
    for (var element in widget.valueListenables) {
      element.removeListener(_valueChanged);
    }
  }

 @override
  void didUpdateWidget(ValueListenableListBuilder<T> oldWidget) {
    if (!const DeepCollectionEquality().equals(oldWidget.valueListenables, widget.valueListenables)) {
      _removeListener(oldWidget);
      value = widget.valueListenables;
      _addListener(widget);
    }
    super.didUpdateWidget(oldWidget);
  }

  void _valueChanged() {
    setState(() {
      value = List.of(widget.valueListenables);
    });
  }

  @override
  Widget build(BuildContext context) {
    final result = value.map((e) => e.value).toList();
    return widget.builder(context, result, widget.child);
  }

再進一步優(yōu)化,上邊返回的result是List,元素沒有具體的類型,在使用的時候會有一些不便利,所以我們可以再上層,添加一層嵌套,以兩個為例,創(chuàng)建一個類來接收這兩個ValueListenable

class Tuple<T1, T2> {
  T1 value1;
  T2 value2;

  Tuple(this.value1, this.value2);

  List<R> toList<R>() => List.from([value1, value2]);

  factory Tuple.fromList(List list) {
    return Tuple(list[0], list[1]);
  }
}

typedef ValueTupleWidgetBuilder<T1, T2> = Widget Function(
  BuildContext context,
  Tuple<T1, T2> value,
  Widget? child,
);

class ValueListenableList2Builder<T1, T2> extends ValueListenableListBuilder {
  ValueListenableList2Builder({
    super.key,
    required Tuple<ValueListenable<T1>, ValueListenable<T2>> valueListenables,
    required ValueTupleWidgetBuilder<T1, T2> builder,
    super.child,
  }) : super(
          valueListenables: valueListenables.toList(),
          builder: (context, value, child) => builder(
            context,
            Tuple.fromList(value),
            child,
          ),
        );
}

這樣一來,我們在使用Tuple的時候就不用再考慮類型問題了