Flutter之使用overlay显示悬浮控件

时间 2019-11-07

标签 flutter 使用 overlay 显示悬浮控件繁體版

原文原文链接

Overlay与OverlayEntry

Overlay是一个Stack的widget，能够将overlay entry插入到overlay中，使独立的child窗口悬浮于其余widget之上。由于Overlay自己使用的是[Stack]布局，因此overlay entry可使用[Positioned] 或者 [AnimatedPositioned]在overlay中定位本身的位置。当咱们建立MaterialApp的时候，它会自动建立一个Navigator，而后建立一个Overlay; 而后利用这个Navigator来管理路由中的界面。就我感受，有点相似Android中的WindowManager，能够利用addView和removeView方法添加或删除View到界面中。git

Overlay的使用方法

主要就是两个方法，往Overlay中插入entry，删除Overlay中的entry。github

//建立OverlayEntry
Overlay entry=new OverlayEntry(builder:(){/*在这里建立对应的widget*/});
//往Overlay中插入插入OverlayEntry
Overlay.of(context).insert(overlayEntry);
//调用entry自身的remove()方法，从所在的overlay中移除本身
entry.remove();
复制代码

Overlay的使用场景

要将某个widget悬浮到页面顶部，就能够利用Overlay来实现。挺多场景都会用到，好比下面的例子。bash

自定义Toast

若是本身写插件调用原生的Toast的话，比较麻烦，可能还会出一些适配的问题。因此能够在Flutter中利用Overlay实现Toast的效果，比较方便，并且无需担忧适配的问题。下面是简单地显示一个Toast，更多功能的话，自行封装咯。

/**
 * 利用overlay实现Toast
 */
class Toast {
  static void show({@required BuildContext context, @required String message}) {
    //建立一个OverlayEntry对象
    OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
    //外层使用Positioned进行定位，控制在Overlay中的位置
      return new Positioned(
          top: MediaQuery.of(context).size.height * 0.7,
          child: new Material(
            child: new Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: new Center(
                child: new Card(
                  child: new Padding(
                    padding: EdgeInsets.all(8),
                    child: new Text(message),
                  ),
                  color: Colors.grey,
                ),
              ),
            ),
          ));
    });
    //往Overlay中插入插入OverlayEntry
    Overlay.of(context).insert(overlayEntry);
    //两秒后，移除Toast
    new Future.delayed(Duration(seconds: 2)).then((value) {
      overlayEntry.remove();
    });
  }
}
复制代码

相似PopupWindow的弹窗效果

好比实现微信首页右上角，点击“+”后的显示的弹窗效果。微信

（TODO：如何监听某个widget的焦点变化，我知道textform能够用focusNode来监听焦点变化，那其余widget如何监听焦点变化呢？）app

/**
   * 展现微信下拉的弹窗
   */
  void showWeixinButtonView() {
    weixinOverlayEntry = new OverlayEntry(builder: (context) {
      return new Positioned(
          top: kToolbarHeight,
          right: 20,
          width: 200,
          height: 320,
          child: new SafeArea(
              child: new Material(
            child: new Container(
              color: Colors.black,
              child: new Column(
                children: <Widget>[
                  Expanded(
                    child: new ListTile(
                      leading: Icon(
                        Icons.add,
                        color: Colors.white,
                      ),
                      title: new Text(
                        "发起群聊",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Expanded(
                    child: new ListTile(
                      leading: Icon(Icons.add, color: Colors.white),
                      title: new Text("添加朋友",
                          style: TextStyle(color: Colors.white)),
                    ),
                  ),
                  Expanded(
                    child: new ListTile(
                      leading: Icon(Icons.add, color: Colors.white),
                      title: new Text("扫一扫",
                          style: TextStyle(color: Colors.white)),
                    ),
                  ),
                  Expanded(
                    child: new ListTile(
                      leading: Icon(Icons.add, color: Colors.white),
                      title: new Text("首付款",
                          style: TextStyle(color: Colors.white)),
                    ),
                  ),
                  Expanded(
                    child: new ListTile(
                      leading: Icon(Icons.add, color: Colors.white),
                      title: new Text("帮助与反馈",
                          style: TextStyle(color: Colors.white)),
                    ),
                  ),
                ],
              ),
            ),
          )));
    });
    Overlay.of(context).insert(weixinOverlayEntry);
  }
}
复制代码

好比，在某个TextForm得到焦点的时候，在TextForm下方显示一个listview的选择项

FocusNode focusNode = new FocusNode();
  OverlayEntry overlayEntry;

  LayerLink layerLink = new LayerLink();

  @override
  void initState() {
    super.initState();
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        overlayEntry = createSelectPopupWindow();
        Overlay.of(context).insert(overlayEntry);
      } else {
        overlayEntry.remove();
      }
    });
  }


  /**
     * 利用Overlay实现PopupWindow效果，悬浮的widget
     * 利用CompositedTransformFollower和CompositedTransformTarget
     */
    OverlayEntry createSelectPopupWindow() {
      OverlayEntry overlayEntry = new OverlayEntry(builder: (context) {
        return new Positioned(
          width: 200,
          child: new CompositedTransformFollower(
            offset: Offset(0.0, 50),
            link: layerLink,
            child: new Material(
              child: new Container(
                  color: Colors.grey,
                  child: new Column(
                    children: <Widget>[
                      new ListTile(
                        title: new Text("选项1"),
                        onTap: () {
                          Toast.show(context: context, message: "选择了选项1");
                          focusNode.unfocus();
                        },
                      ),
                      new ListTile(
                          title: new Text("选项2"),
                          onTap: () {
                            Toast.show(context: context, message: "选择了选项1");
                            focusNode.unfocus();
                          }),
                    ],
                  )),
            ),
          ),
        );
      });
      return overlayEntry;
    }


复制代码

代码地址

github.com/LXD31256949…less

Overlay的源码（涉及Render方面的暂时没理解，就没翻译了）

//源文件:overlay.dart

import 'dart:async';
import 'dart:collection';

import 'package:flutter/foundation.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/scheduler.dart';

import 'basic.dart';
import 'debug.dart';
import 'framework.dart';
import 'ticker_provider.dart';

/// [Overlay]中的任意位置均可以包含一个widget。由于Overlay自己使用的是[Stack]布局，因此overlay entry
/// 可使用[Positioned] 或者 [AnimatedPositioned]在overlay中定位本身的位置。
///
/// Overlay entries 使用[OverlayState.insert] or [OverlayState.insertAll]方法就能够插入到
/// [Overlay]中。可使用[Overlay.of]方法和利用所给的[BuildContext] 去找到最近的overlay实例并拿到OverlayState对象
///
///一个overlay entry在同一个时间只能被插入到最多一个overlay中。能够调用overlay entry自身的[remove]方法，去移除它所在的overlay
///
///
/// For example, [Draggable] uses an [OverlayEntry] to show the drag avatar that
/// follows the user's finger across the screen after the drag begins. Using the /// overlay to display the drag avatar lets the avatar float over the other /// widgets in the app. As the user's finger moves, draggable calls
/// [markNeedsBuild] on the overlay entry to cause it to rebuild. It its build,
/// the entry includes a [Positioned] with its top and left property set to
/// position the drag avatar near the user's finger. When the drag is over, /// [Draggable] removes the entry from the overlay to remove the drag avatar /// from view. /// /// By default, if there is an entirely [opaque] entry over this one, then this /// one will not be included in the widget tree (in particular, stateful widgets /// within the overlay entry will not be instantiated). To ensure that your /// overlay entry is still built even if it is not visible, set [maintainState] /// to true. This is more expensive, so should be done with care. In particular, /// if widgets in an overlay entry with [maintainState] set to true repeatedly /// call [State.setState], the user's battery will be drained unnecessarily.

class OverlayEntry {
  /// OverlayEntry的构造方法，
  ///
  /// 为了将overlay entry插入到 [Overlay]中, 首先是使用[Overlay.of]方法去拿到OverlayState对象，
  /// 而后再调用[OverlayState.insert]将overlay entry插入到overlay中。
  /// 调用overlay entry自身的[remove]方法，去移除它所在的overlay
  OverlayEntry({
    @required this.builder,
    bool opaque = false,
    bool maintainState = false,
  }) : assert(builder != null),
       assert(opaque != null),
       assert(maintainState != null),
       _opaque = opaque,
       _maintainState = maintainState;


  /// 经过builder进行建立对应的widget,并显示在overlay中的对应位置
  /// 若是想再次调用这个builder方法，须要调用overlay entry自身的[markNeedsBuild]方法
  final WidgetBuilder builder;

  /// Whether this entry occludes the entire overlay.
  ///
  /// If an entry claims to be opaque, then, for efficiency, the overlay will
  /// skip building entries below that entry unless they have [maintainState]
  /// set.
  bool get opaque => _opaque;
  bool _opaque;
  set opaque(bool value) {
    if (_opaque == value)
      return;
    _opaque = value;
    assert(_overlay != null);
    _overlay._didChangeEntryOpacity();
  }

  /// Whether this entry must be included in the tree even if there is a fully
  /// [opaque] entry above it.
  ///
  /// By default, if there is an entirely [opaque] entry over this one, then this
  /// one will not be included in the widget tree (in particular, stateful widgets
  /// within the overlay entry will not be instantiated). To ensure that your
  /// overlay entry is still built even if it is not visible, set [maintainState]
  /// to true. This is more expensive, so should be done with care. In particular,
  /// if widgets in an overlay entry with [maintainState] set to true repeatedly
  /// call [State.setState], the user's battery will be drained unnecessarily. /// /// 这个字段，是给[Navigator]和[Route]使用的，确保路由即便在后台也能维持状态。 bool get maintainState => _maintainState; bool _maintainState; set maintainState(bool value) { assert(_maintainState != null); if (_maintainState == value) return; _maintainState = value; assert(_overlay != null); _overlay._didChangeEntryOpacity(); } OverlayState _overlay; final GlobalKey<_OverlayEntryState> _key = GlobalKey<_OverlayEntryState>(); /// 从overlay中移除overlay entry. /// 这个方法只能被调用一次 void remove() { assert(_overlay != null); final OverlayState overlay = _overlay; _overlay = null; if (SchedulerBinding.instance.schedulerPhase == SchedulerPhase.persistentCallbacks) { SchedulerBinding.instance.addPostFrameCallback((Duration duration) { overlay._remove(this); }); } else { overlay._remove(this); } } /// 须要在[builder]所建立的widget发生变化的时候，调用这个方法，会致使entry在下一次管道刷新期间进行rebuild操做。 void markNeedsBuild() { _key.currentState?._markNeedsBuild(); } @override String toString() => '${describeIdentity(this)}(opaque: $opaque; maintainState: $maintainState)'; } class _OverlayEntry extends StatefulWidget { _OverlayEntry(this.entry) : assert(entry != null), super(key: entry._key); final OverlayEntry entry; @override _OverlayEntryState createState() => _OverlayEntryState(); } class _OverlayEntryState extends State<_OverlayEntry> { @override Widget build(BuildContext context) { return widget.entry.builder(context); } void _markNeedsBuild() { setState(() { /* the state that changed is in the builder */ }); } } /// A [Stack] of entries that can be managed independently. /// Overlay是一个[Stack]布局，能够独立管理存放在它里面的overlay entry。 /// /// 经过将entry插入到overlay的[Stack]中，Overlay可让child widget悬浮于其余可视化的widgets上面。 /// 虽然你能够直接建立一个[Overlay]，可是最多见的用法，是在[WidgetsApp]或者[MaterialApp]中使用由Navigator建立的overlay对象就行。 /// Navigator的原理，是使用它的overlay来管理路由中的可视化界面。 class Overlay extends StatefulWidget { /// Overlay的构造方法. /// /// 在与它所关联的[OverlayState]被初始化后，initialEntries被插入到overlay中。 /// 与其本身建立一个overlay，好比考虑直接使用由[WidgetsApp]或者 [MaterialApp]为应用程序所建立的overlay就行。 const Overlay({ Key key, this.initialEntries = const <OverlayEntry>[] }) : assert(initialEntries != null), super(key: key); /// 这些entries是overlay初始化的时候，被会插入到overlay中的entry. /// 插入方法和删除方法，跟上面讲的是同样的。 /// 使用[Overlay.of]方法去拿到OverlayState对象， /// 而后再调用[OverlayState.insert]将overlay entry插入到overlay中。 /// 调用overlay entry自身的[remove]方法，去移除它所在的overlay final List<OverlayEntry> initialEntries; /// The state from the closest instance of this class that encloses the given context. /// 经过所传的context上下文对象，利用context.ancestorStateOfType方法，返回与给定state类型匹配的最接近的祖先小部件State对象 /// 这个实际上是InheritedWidget的原理，利用context.ancestorStateOfType方法，找到应用程序中的OverlayState祖先对象。 /// 使用方法: /// ```dart /// OverlayState overlay = Overlay.of(context); /// ``` static OverlayState of(BuildContext context, { Widget debugRequiredFor }) { final OverlayState result = context.ancestorStateOfType(const TypeMatcher<OverlayState>()); assert(() { if (debugRequiredFor != null && result == null) { final String additional = context.widget != debugRequiredFor ? '\nThe context from which that widget was searching for an overlay was:\n  $context' : ''; throw FlutterError( 'No Overlay widget found.\n' '${debugRequiredFor.runtimeType} widgets require an Overlay widget ancestor for correct operation.\n' 'The most common way to add an Overlay to an application is to include a MaterialApp or Navigator widget in the runApp() call.\n' 'The specific widget that failed to find an overlay was:\n' '  $debugRequiredFor' '$additional' ); } return true; }()); return result; } @override OverlayState createState() => OverlayState(); } /// [Overlay]当前的State对象 /// 能够用来插入overlay entry到overlay中 class OverlayState extends State<Overlay> with TickerProviderStateMixin { final List<OverlayEntry> _entries = <OverlayEntry>[]; @override void initState() { super.initState(); insertAll(widget.initialEntries); } /// 把给定的entry插入到overlay中 /// 若是[above]不为空，则entry会被插入到[above]上面。默认，通常是直接插入到最顶部。 void insert(OverlayEntry entry, { OverlayEntry above }) { assert(entry._overlay == null); assert(above == null || (above._overlay == this && _entries.contains(above))); entry._overlay = this; setState(() { final int index = above == null ? _entries.length : _entries.indexOf(above) + 1; _entries.insert(index, entry); }); } /// 把多个entry插入到overlay中 void insertAll(Iterable<OverlayEntry> entries, { OverlayEntry above }) { assert(above == null || (above._overlay == this && _entries.contains(above))); if (entries.isEmpty) return; for (OverlayEntry entry in entries) { assert(entry._overlay == null); entry._overlay = this; } setState(() { final int index = above == null ? _entries.length : _entries.indexOf(above) + 1; _entries.insertAll(index, entries); }); } void _remove(OverlayEntry entry) { if (mounted) { _entries.remove(entry); setState(() { /* entry was removed */ }); } } /// (DEBUG ONLY) Check whether a given entry is visible (i.e., not behind an /// opaque entry). /// /// This is an O(N) algorithm, and should not be necessary except for debug /// asserts. To avoid people depending on it, this function is implemented /// only in checked mode. bool debugIsVisible(OverlayEntry entry) { bool result = false; assert(_entries.contains(entry)); assert(() { for (int i = _entries.length - 1; i > 0; i -= 1) { final OverlayEntry candidate = _entries[i]; if (candidate == entry) { result = true; break; } if (candidate.opaque) break; } return true; }()); return result; } void _didChangeEntryOpacity() { setState(() { // We use the opacity of the entry in our build function, which means we // our state has changed. }); } @override Widget build(BuildContext context) { // These lists are filled backwards. For the offstage children that // does not matter since they aren't rendered, but for the onstage
    // children we reverse the list below before adding it to the tree.
    final List<Widget> onstageChildren = <Widget>[];
    final List<Widget> offstageChildren = <Widget>[];
    bool onstage = true;
    for (int i = _entries.length - 1; i >= 0; i -= 1) {
      final OverlayEntry entry = _entries[i];
      if (onstage) {
        onstageChildren.add(_OverlayEntry(entry));
        if (entry.opaque)
          onstage = false;
      } else if (entry.maintainState) {
        offstageChildren.add(TickerMode(enabled: false, child: _OverlayEntry(entry)));
      }
    }
    return _Theatre(
      onstage: Stack(
        fit: StackFit.expand,
        children: onstageChildren.reversed.toList(growable: false),
      ),
      offstage: offstageChildren,
    );
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    // TODO(jacobr): use IterableProperty instead as that would
    // provide a slightly more consistent string summary of the List.
    properties.add(DiagnosticsProperty<List<OverlayEntry>>('entries', _entries));
  }
}

复制代码