Flutter Overlay、OverlayState、OverlayEntry 疊加 Toast Demo

大灰狼的小綿羊哥哥發表於2020-10-22

疊加元件,可以懸浮在其他元件上邊,我們通常使用他開發Toast、PopupWindow彈窗等

雖然可以直接建立Overlay ,但最常見的是在WidgetsApp或MaterialApp中使用導航器建立的疊加層。

使用方法

 
  1. //獲取例項

  2. OverlayState overlayState = Overlay.of(_context);

  3. //建立OverlayEntry

  4. OverlayEntry overlayEntry = OverlayEntry(builder);

  5. //顯示到螢幕上

  6. overlayState.insert(_overlayEntry);

  7. //移除螢幕

  8. overlayEntry.remove();

程式碼示例

一個透明漸變的 Toast Demo 程式碼片段,點選檢視完整程式碼

 
  1. //顯示 文字 Toast 透明漸變 程式碼片段

  2. static void _makeTextShowOpacity() async {

  3.  
  4. _showing = true;

  5.  
  6. //建立OverlayEntry

  7. _overlayEntry = OverlayEntry(

  8. builder: (BuildContext context) => Positioned(

  9. //top值,可以改變這個值來改變toast在螢幕中的位置

  10. top: _top,

  11. child: Container(

  12. alignment: Alignment.center,//居中

  13. width: MediaQuery.of(context).size.width,//Container 寬

  14. child: AnimatedOpacity(

  15. //目標透明度

  16. opacity: _showing ? 1.0 : 0.0,

  17. //執行時間

  18. duration: _showing ? Duration(milliseconds: _millisecondsShow) : Duration(milliseconds: _millisecondsHide),

  19. child: _toastWidget,

  20. ),

  21. ),

  22. )

  23. );

  24. //顯示到螢幕上

  25. Overlay.of(_context).insert(_overlayEntry);

  26. //等待兩秒

  27. await Future.delayed(Duration(milliseconds: _milliseconds));

  28.  
  29. //2秒後 到底消失不消失

  30. if (DateTime.now().difference(_startedTime).inMilliseconds >= _milliseconds) {

  31. _showing = false;

  32. //重新繪製UI,類似setState

  33. _overlayEntry.markNeedsBuild();

  34. //等待動畫執行

  35. await Future.delayed(Duration(milliseconds: _millisecondsHide));

  36. if(!_showing){

  37. _overlayEntry.remove();

  38. _overlayEntry = null;

  39. }

  40. }

  41. }

效果圖

新增曲線和不新增曲線效果對比

     


完整程式碼

檢視完整程式碼

相關文章