说说Flutter中的Overlay

Overlay是什么

Flutter中的Overlay是什么？先看看官方的文档注释吧：web

/// A [Stack] of entries that can be managed independently.
///
/// Overlays let independent child widgets "float" visual elements on top of
/// other widgets by inserting them into the overlay's [Stack]. The overlay lets
/// each of these widgets manage their participation in the overlay using
/// [OverlayEntry] objects.
复制代码

简单总结一下，Overlay是一个能够管理的堆栈。咱们能够经过将一个Widget插入这个堆栈中，这样就可让此Widget浮在其余的Widget之上，从而实现悬浮窗效果。咱们能够经过OverlayEntry对象的配置来管理Overlay的层级关系。markdown

经过追踪构造方法，咱们能够发现它被Navigator所建立，而Navigator又被WidgetsApp所建立。一般咱们runApp启动的page里会建立的CupertinoApp或者MaterialApp都会建立WidgetsApp，所以咱们在项目中能够直接使用这个建立好的Overlay。app

简单使用

@override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
      (timeStamp) {
        OverlayEntry entry = OverlayEntry(
          builder: (_) {
            return IgnorePointer(
              child: Center(
                child: Text('OverlayEntry'),
              ),
            );
          },
        );
        Overlay.of(context).insert(entry);
      },
    );
  }
复制代码

Overlay的使用很简单，经过Overlay.of(context)方法向上查找到OverlayState，而后经过insert或者insertAll方法插入一个或多个悬浮Widget。若是想要移除此悬浮Widget，咱们能够经过OverlayEntry的remove()方法实现。ide

Overlay原理源码解析

为何Overlay插入的OverlayEntry会在页面上面悬浮呢？先来看看insert方法作了什么：布局

void insert(OverlayEntry entry, { OverlayEntry below, OverlayEntry above }) {
  ...
  entry._overlay = this;
  setState(() {
    _entries.insert(_insertionIndex(below, above), entry);
  });
}
复制代码

能够看到OverlayEntry被插入了_entries中的指定位置，再看_insertionIndex的实现：post

int _insertionIndex(OverlayEntry below, OverlayEntry above) {
  assert(above == null || below == null);
  if (below != null)
    return _entries.indexOf(below);
  if (above != null)
    return _entries.indexOf(above) + 1;
  return _entries.length;
}
复制代码

咱们没有指定可选参数的时候，默认会将OverlayEntry插入到_entries的末端。再看看OverlayState的build方法：ui

@override
  Widget build(BuildContext context) {
    // This list is filled backwards and then reversed below before
    // it is added to the tree.
    final List<Widget> children = <Widget>[];
    bool onstage = true;
    int onstageCount = 0;
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      if (onstage) {
        onstageCount += 1;
        children.add(_OverlayEntryWidget(
          key: entry._key,
          entry: entry,
        ));
        if (entry.opaque)
          onstage = false;
      } else if (entry.maintainState) {
        children.add(_OverlayEntryWidget(
          key: entry._key,
          entry: entry,
          tickerEnabled: false,
        ));
      }
    }
    return _Theatre(
      skipCount: children.length - onstageCount,
      children: children.reversed.toList(growable: false),
    );
  }
复制代码

build中会倒序遍历_entries，而后生成一个个_OverlayEntryWidget，最后这个列表又会被倒序放入_Theatre这个控件中。那这个_Theatre是什么呢？this

/// Special version of a [Stack], that doesn't layout and render the first
/// [skipCount] children.
///
/// The first [skipCount] children are considered "offstage".
class _Theatre extends MultiChildRenderObjectWidget 复制代码

仍是得看源码，能够看出_Theatre继承本身MultiChildRenderObjectWidget，这就好办了，结合我以前写的深刻研究Flutter布局原理，我只用关心paint方法就能够知道这些children是如何绘制的了，来看paint方法：url

@protected
  void paintStack(PaintingContext context, Offset offset) {
    RenderBox child = _firstOnstageChild;
    while (child != null) {
      final StackParentData childParentData = child.parentData as StackParentData;
      context.paintChild(child, childParentData.offset + offset);
      child = childParentData.nextSibling;
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (_hasVisualOverflow) {
      context.pushClipRect(needsCompositing, offset, Offset.zero & size, paintStack);
    } else {
      paintStack(context, offset);
    }
  }
复制代码

paint很简单，他会从第一个child开始循环绘制，也就是说children会被一层一层的绘制在屏幕上，那么咱们最后插入的OverlayEntry天然是在最上了。spa

可能到这里仍是会有疑惑，插入的OverlayEntry只是在众多的OverlayEntry当中的最上，为啥会在各个页面之上呢？其实到这里也能够大概才出缘由了：

/// Although you can create an [Overlay] directly, it's most common to use the
/// overlay created by the [Navigator] in a [WidgetsApp] or a [MaterialApp]. The
/// navigator uses its overlay to manage the visual appearance of its routes.
复制代码

Overlay的注释中还有这么一段：The navigator uses its overlay to manage the visual appearance of its routes.，因此，咱们的各个页面其实也是一个个OverlayEntry，Navigator的源码仍是比较绕的，追踪源码看看：

@optionalTypeArgs
Future<T> push<T extends Object>(Route<T> route) {
  ...
  _history.add(_RouteEntry(route, initialState: _RouteLifecycle.push));
  _flushHistoryUpdates();
  ...
  _afterNavigation(route);
  return route.popped;
}
复制代码

当咱们执行Navigator的push方法后，会先放_history中增长一条路由记录，而后执行 _flushHistoryUpdates 方法：

void _flushHistoryUpdates({bool rearrangeOverlay = true}) {
  int index = _history.length - 1;
  ...
  final List<_RouteEntry> toBeDisposed = <_RouteEntry>[];
  while (index >= 0) {
    switch (entry.currentState) {
     ...
      case _RouteLifecycle.push:
      case _RouteLifecycle.pushReplace:
      case _RouteLifecycle.replace:
        assert(rearrangeOverlay);
        entry.handlePush(
          navigator: this,
          previous: previous?.route,
          previousPresent: _getRouteBefore(index - 1, _RouteEntry.isPresentPredicate)?.route,
          isNewFirst: next == null,
        );
        assert(entry.currentState != _RouteLifecycle.push);
        assert(entry.currentState != _RouteLifecycle.pushReplace);
        assert(entry.currentState != _RouteLifecycle.replace);
        if (entry.currentState == _RouteLifecycle.idle) {
          continue;
        }
        break;
     ...
      case _RouteLifecycle.disposed:
      case _RouteLifecycle.staging:
        assert(false);
        break;
    }
    index -= 1;
    next = entry;
    entry = previous;
    previous = index > 0 ? _history[index - 1] : null;
  }
  ...
  if (rearrangeOverlay)
    overlay?.rearrange(_allRouteOverlayEntries);
}
复制代码

_flushHistoryUpdates方法很长，这里看要点，push方法执行后会加入的_RouteEntry，会执行handlePush方法，handlePush方法会执行Route的install方法，看看咱们经常使用的MaterialPageRoute的继承关系：

藏得真的深，咱们能够发现MaterialPageRoute有一个父类OverlayRoute，看看OverlayRoute中的install方法：

@override
void install() {
  assert(_overlayEntries.isEmpty);
  _overlayEntries.addAll(createOverlayEntries());
  super.install();
}
复制代码

install方法会执行createOverlayEntries方法生成Iterable<OverlayEntry>并加入列表。到这里咱们也大概能够搞清楚了，push一个页面本质上仍是push了一个OverlayEntry。_flushHistoryUpdates方法最终会调用OverlayState的rearrange方法处理列表：

void rearrange(Iterable<OverlayEntry> newEntries, { OverlayEntry below, OverlayEntry above }) {
  final List<OverlayEntry> newEntriesList = newEntries is List<OverlayEntry> ? newEntries : newEntries.toList(growable: false);
  ...
  if (newEntriesList.isEmpty)
    return;
  if (listEquals(_entries, newEntriesList))
    return;
  final LinkedHashSet<OverlayEntry> old = LinkedHashSet<OverlayEntry>.from(_entries);
  for (final OverlayEntry entry in newEntriesList) {
    entry._overlay ??= this;
  }
  setState(() {
    _entries.clear();
    _entries.addAll(newEntriesList);
    old.removeAll(newEntriesList);
    _entries.insertAll(_insertionIndex(below, above), old);
  });
}
复制代码

rearrange方法会先复制一遍旧的_entries列表，而后清空_entries列表，加入最新的路由列表数据，再从旧列表中去重路由列表，这样剩下的基本都是用户本身insert的OverlayEntry，最后再将旧列表的数据插入新的列表，这样用户的OverlayEntry仍是会在各个页面的上层。