Flutter 使用 Overlay 实现全局弹窗

Posted 2022-02-06 飞翔的熊blabla

一、Overlay 介绍

1、Overlay 是什么

在官网上关于 Overlay 的介绍是：

 

简单翻译一下:

Overlay 这个 widget 是一个 基于 Stack 管理的 Widget，可以独立的使用。

Overlay 通过把独立的 widget 插入到 overlay 的 stack 里面来实现让这个 widget 显示到其他 widget 的上面。Overlay 是通过 OverlayEntry 来管理 widget 的显示层次的（不能直接使用 widget）。

可以直接创建一个 Overlay 对象来使用，但是更一般的，都是使用 WidgetsApp 或者 MaterialApp 里面的 Navigator 创建了 Overlay，Navigator 使用这个 overlay 来管理路由显示效果（我们可以通过这个 overlay 来实现全局弹窗）。

2、Overlay 使用步骤

• 创建 OverlayEntry

Overlay entry=new OverlayEntry(
builder:()
//自己的 widget
);
复制代码

• 将 OverlayEntry 插入到 Overlay 中

Overlay.of(context).insert(overlayEntry);
复制代码

• 将 OverlayEntry 移除

entry.remove();
复制代码

二、基于 Overlay 实现 Toast

//通过 Overlay 实现 Toast
class Toast 
  static void show(@required BuildContext context, @required String message) 

    //1、创建 overlayEntry
    OverlayEntry overlayEntry = new OverlayEntry(builder: (context) 
      return new Positioned(
          top: MediaQuery.of(context).size.height * 0.8,
          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.withOpacity(0.6),
                ),
              ),
            ),
          ));
    );


    //插入到 Overlay中显示 OverlayEntry
    Overlay.of(context).insert(overlayEntry);


    //延时两秒，移除 OverlayEntry
    new Future.delayed(Duration(seconds: 2)).then((value) 
      overlayEntry.remove();
    
    );
  
复制代码

使用：

    RaisedButton(
                child: Text('SUBMIT'),
                onPressed: () 
                  Toast.show(context: context, message: "信息已经提交!");
                ,
              )
复制代码

三、基于 Overlay 实现文字输入框自动提示（补全）

假设我们有一个信息输入界面，如下：

 

我们希望用户在输入框输入的时候，可以在下方根据用户的输入，当输入框获取焦点时，来展示一个 list 来辅助用户输入（这个可以根据自己的需求来调整），如下：

 

当然为了实现这个功能，完全可以重写界面，通过 Stack + Position 来完成，但是这样可能需要重构代码，增加界面复杂度，而且可扩展性差，可以通过 Overlay 的方式来实现这个功能。

1、通过 Overlay 来显示悬浮窗

我们需要实现的是，当 TextFormField 获取焦点的时候，就弹出弹窗，当失去焦点的时候，就移除这个弹窗。定义这个弹窗控件如下：

class CountriesField extends StatefulWidget 
  @override
  _CountriesFieldState createState() => _CountriesFieldState();


class _CountriesFieldState extends State<CountriesField> 

  final FocusNode _focusNode = FocusNode();

  OverlayEntry _overlayEntry;

  @override
  void initState() 
    _focusNode.addListener(() 
      if (_focusNode.hasFocus) 

        this._overlayEntry = this._createOverlayEntry();
        Overlay.of(context).insert(this._overlayEntry);

       else 
        this._overlayEntry.remove();
      
    );
  

  OverlayEntry _createOverlayEntry() 

    RenderBox renderBox = context.findRenderObject();
    var size = renderBox.size;
    var offset = renderBox.localToGlobal(Offset.zero);

    return OverlayEntry(
      builder: (context) => Positioned(
        left: offset.dx,
        top: offset.dy + size.height + 5.0,
        width: size.width,
        child: Material(
          elevation: 4.0,
          child: ListView(
            padding: EdgeInsets.zero,
            shrinkWrap: true,
            children: <Widget>[
              ListTile(
                title: Text('Syria'),
              ),
              ListTile(
                title: Text('Lebanon'),
              )
            ],
          ),
        ),
      )
    );
  

  @override
  Widget build(BuildContext context) 
    return TextFormField(
        focusNode: this._focusNode,
      decoration: InputDecoration(
        labelText: 'Country'
      ),
    );
  

复制代码

• 通过 FocusNode 来监听 TextFormField 获取或者失去焦点事件，FocusNode 在 initState 里面进行了初始化。
• 当 TextFormField 获取焦点时，我们把通过 _createOverlayEntry 创建的 OverlayEntry 用 Overlay.of(context).insert 方法 插入到 Overlay 的最上面，这样就显示了这个悬浮窗。
• 当 TextFormField 失去焦点的时候，我们通过 _overlayEntry.remove 方法来移除弹窗。
• 因为我们显示弹窗的时候，需要知道这个弹窗的显示的位置，这个位置肯定是和当前输入框相关的，我们可以通过 context.findRenderObject 方法来找到当前 RenderBox，根据这个 RenderBox 我们就可以知道当前显示的这个 widget 的位置，大小或者其他渲染信息，根据这些信息我我们就可以调整弹窗的位置和大小。
• renderBox.localToGlobal(Offset.zero) 表示获取当前 widget 在屏幕中的位置。
• 弹窗内部，我们通过 Positioned 来定位弹窗，通过 ListView 来展示内容。

但是，当使用这个自定义控件时，会出现一个问题，就是当 ListView 足够长，我们滚动 ListView 时，这个弹窗的位置是固定不变的。

 

2、弹窗跟随滚动

我们需要做到是，我们的全局弹窗可以跟随 TextField 滚动，Flutter 提供了两个组件：CompositedTransformFollower 和 CompositedTransformTarget 。

我们将一个 follower 和 一个 target 链接在一起（为这两个 widget 指定相同的 LayerLink），这样当 target 滚动的时候，follower 就会跟随滚动。

在我们这个示例里，弹窗相当于 Follower，而 TextField 是 Target 。我们用 CompositedTransformFollower 和 CompositedTransformTarget 分别包裹弹窗和 TextField，代码如下：

class CountriesField extends StatefulWidget 
  @override
  _CountriesFieldState createState() => _CountriesFieldState();


class _CountriesFieldState extends State<CountriesField> 

  final FocusNode _focusNode = FocusNode();

  OverlayEntry _overlayEntry;

  final LayerLink _layerLink = LayerLink();

  @override
  void initState() 
    _focusNode.addListener(() 
      if (_focusNode.hasFocus) 

        this._overlayEntry = this._createOverlayEntry();
        Overlay.of(context).insert(this._overlayEntry);

       else 
        this._overlayEntry.remove();
      
    );
  

  OverlayEntry _createOverlayEntry() 

    RenderBox renderBox = context.findRenderObject();
    var size = renderBox.size;

    return OverlayEntry(
      builder: (context) => Positioned(
        width: size.width,
        child: CompositedTransformFollower(
          link: this._layerLink,
          showWhenUnlinked: false,
          offset: Offset(0.0, size.height + 5.0),
          child: Material(
            elevation: 4.0,
            child: ListView(
              padding: EdgeInsets.zero,
              shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  title: Text('Syria'),
                  onTap: () 
                    print('Syria Tapped');
                  ,
                ),
                ListTile(
                  title: Text('Lebanon'),
                  onTap: () 
                    print('Lebanon Tapped');
                  ,
                )
              ],
            ),
          ),
        ),
      )
    );
  

  @override
  Widget build(BuildContext context) 
    return CompositedTransformTarget(
      link: this._layerLink,
      child: TextFormField(
          focusNode: this._focusNode,
        decoration: InputDecoration(
          labelText: 'Country'
        ),
      ),
    );
  

复制代码

• 在上面的代码里，我们通过 CompositedTransformFollower 包裹了 OverlayEntry，通过 CompositedTransformTarget 包裹了 TextFormTield 。
• 我们为 Follower 和 Target 提供了相同的 LayerLink 实例，这样可以实现弹窗跟随滚动的效果。
• 因为弹窗跟随 target 滚动，因此在 Positioned 里面不在需要 top 和 left 属性了。
• 设置 showWhenUnlinked 为 false，这样当target 不在屏幕中时(滚出屏幕)，设置弹窗隐藏。

效果 ：

 

参考： Using Overlay to display floating widgets

代码： github

欢迎关注「Flutter 编程开发」微信公众号 。
作者：Flutter编程开发
链接：https://juejin.cn/post/6844904115764658189
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。