使用Flutter实现Toast效果

作者: 平静的阿卿达 | 来源:发表于2018-10-16 11:18 被阅读1252次

    先上个效果图:


    Toast1.gif

    最近在看Draggable源码,在其中有这么一段:

    class _DragAvatar<T> extends Drag {
      _DragAvatar({
        @required this.overlayState,
        this.data,
        this.axis,
        Offset initialPosition,
        this.dragStartPoint = Offset.zero,
        this.feedback,
        this.feedbackOffset = Offset.zero,
        this.onDragEnd,
        @required this.ignoringFeedbackSemantics,
      }) : assert(overlayState != null),
           assert(ignoringFeedbackSemantics != null),
           assert(dragStartPoint != null),
           assert(feedbackOffset != null) {
        _entry = OverlayEntry(builder: _build);//在这里创建一个Entry
        overlayState.insert(_entry);//将Entry添加到OverlayState中
        _position = initialPosition;
        updateDrag(initialPosition);
      }
    }
    
    _DragAvatarDraggable中的私有类,主要作用是当识别到拖拽事件的时候,在屏幕上绘制相应的Widget跟随手指移动。

    可以看到,绘制跟随手指移动的Widget的关键代码是创建一个OverlayEntry,然后将其添加到OverlayState中。那么问题来了OverlayState是什么呢?
    事实上有一个Overlay的Widge,它是一个StatefullWidget,它的createState方法获取的就是OverlayState对象。
    Overlay可以认为是一个UI上面的蒙版/浮空层,使用起来类似Stack,如何使用:
    通过Overlay.of获得OverlayState对象,调用OverlayState.insert添加OverlayEntry,当不需要的时候,通过OverlayEntry.remove移除OverlayEntry

    OverlayState使用示例:
        //获取OverlayState
        OverlayState overlayState = Overlay.of(context);
        //创建OverlayEntry
        OverlayEntry _overlayEntry = OverlayEntry(
            builder: (BuildContext context) => Positioned(
                  child: Icon(Icons.check_circle),
                ));
        //显示到屏幕上。
        overlayState.insert(_overlayEntry);
    

    这样就可以在屏幕上显示一个Icon。
    我能可以通过修改Positionedleft,top,right,bottom等值来修改它在屏幕中的位置;最后,可以通过_overlayEntry.remove();来移除它,让它在屏幕上消失。

    例如我们做一个出现2秒后消失的Icon。
    
      void _addOverlay(BuildContext context) async {
        //获取OverlayState
        OverlayState overlayState = Overlay.of(context);
        //创建OverlayEntry
        OverlayEntry _overlayEntry = OverlayEntry(
            builder: (BuildContext context) => Positioned(
                  child: Icon(Icons.check_circle),
                ));
        //显示到屏幕上。
        overlayState.insert(_overlayEntry);
        //等待2秒
        await Future.delayed(Duration(seconds: 2));
        //移除
        _overlayEntry.remove();
      }
    

    当做到这里,思路就很清晰了。稍微修改一下OverlayEntrybuild方法返回一个符合要求的toast,然后加个渐变透明的动画。基本上就能满足我们的需求啦。

    最终Toast类代码如下:
    
    ///
    /// @author tsing
    /// @time 2018/10/15 下午2:33
    /// @email shuqing.li@merculet.io
    ///
    class Toast {
      static OverlayEntry _overlayEntry; //toast靠它加到屏幕上
      static bool _showing = false; //toast是否正在showing
      static DateTime _startedTime; //开启一个新toast的当前时间,用于对比是否已经展示了足够时间
      static String _msg;
      static void toast(
        BuildContext context,
        String msg,
      ) async {
        assert(msg != null);
        _msg = msg;
        _startedTime = DateTime.now();
        //获取OverlayState
        OverlayState overlayState = Overlay.of(context);
        _showing = true;
        if (_overlayEntry == null) {
          _overlayEntry = OverlayEntry(
              builder: (BuildContext context) => Positioned(
                    //top值,可以改变这个值来改变toast在屏幕中的位置
                    top: MediaQuery.of(context).size.height * 2 / 3,
                    child: Container(
                        alignment: Alignment.center,
                        width: MediaQuery.of(context).size.width,
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 80.0),
                          child: AnimatedOpacity(
                            opacity: _showing ? 1.0 : 0.0, //目标透明度
                            duration: _showing
                                ? Duration(milliseconds: 100)
                                : Duration(milliseconds: 400),
                            child: _buildToastWidget(),
                          ),
                        )),
                  ));
          overlayState.insert(_overlayEntry);
        } else {
          //重新绘制UI,类似setState
          _overlayEntry.markNeedsBuild();
        }
        await Future.delayed(Duration(milliseconds: 2000)); //等待两秒
    
        //2秒后 到底消失不消失
        if (DateTime.now().difference(_startedTime).inMilliseconds >= 2000) {
          _showing = false;
          _overlayEntry.markNeedsBuild();
        }
      }
    
      //toast绘制
      static _buildToastWidget() {
        return Center(
          child: Card(
            color: Colors.black26,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
              child: Text(
                _msg,
                style: TextStyle(
                  fontSize: 14.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        );
      }
    }
    

    上篇中提到的DragAndDropList是通过重写Draggable实现的拖动动画效果,就是在我们今天用到的_DragAvatar中的update方法中获取的每次移动的Offset。在得到这个回调值后,就可以做很作骚操作了。

    相关文章

      网友评论

        本文标题:使用Flutter实现Toast效果

        本文链接:https://www.haomeiwen.com/subject/pdiczftx.html