Flutter 使用 Overlay 实现全局弹窗_flutter overlay

作者：天景科技苑 | 2024-06-19 12:04:01

踩

flutter overlay

一、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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】