当在flutter中做一个全局的Toast,loading,Alert的时候,会使用到OverlayEntry,只要通过OverlayState.insert()就能展示在界面上。如此好用那OverlayState又是从哪来的呢?
首先,获取OverlayState可以直接调用OverlayState overlayState = Overlay.of(context);直接就拿context去找了:OverlayState result = context.findAncestorStateOfType<OverlayState>();
能找到?怎么就找到了呢
![](https://img.haomeiwen.com/i2063662/33babd2f34f06783.png)
那看下Overlay的注释:
![](https://img.haomeiwen.com/i2063662/a38ed0bb184bdfe9.png)
尽管您可以直接创建一个[Overlay],但最常见的是使用[WidgetsApp]或[MaterialApp]中的[Navigator]创建的。导航器使用其overlay来管理路由的视觉外观。
其中很关键的点在Navigator,那去找Navigator,顺便还找到了Route。
![](https://img.haomeiwen.com/i2063662/0e34e1358b2f54ff.png)
![](https://img.haomeiwen.com/i2063662/500e53258f798744.png)
Navigator中一层结构就是Overlay。那看下Flutter中导航到底是怎么做的。
![](https://img.haomeiwen.com/i2063662/8eebda2a069fa429.png)
![](https://img.haomeiwen.com/i2063662/ae4a2d4f24aef98f.png)
许多应用程序在其小部件层次结构的顶部附近都有一个导航器,以便使用[Overlay]来显示它们的逻辑历史,其中最近访问的页面可视化地位于较旧页面的顶部。通过使用此模式,导航器可以通过在覆盖图中移动小部件从一个页面可视地过渡到另一个页面。
既然Overlay从导航而来,那App中怎么就有导航呢?
Flutter创建的的时候,main里面的入口runApp(),在视图的最底层会写一个MaterialApp().
找到MaterialApp。
![](https://img.haomeiwen.com/i2063662/f7e8fa81394fe67c.png)
那就找在哪创建了Navigator。没找到,但是在return时用的是WidgetsApp,看下介绍。
![](https://img.haomeiwen.com/i2063662/22e48ed8b9bc9e3e.png)
WidgetsApp定义了基本的应用程序元素,但不依赖于Material库,也就是MaterialApp是对WidgetsApp的上层封装,为我们集成了Material元素。继续找WidgetsApp。
![](https://img.haomeiwen.com/i2063662/2140f23c0867e93c.png)
在build里面创建了Navigator。
那么流程就是:MaterialApp ——> WidgetsApp ——> Navigator。
Overlay.of(context)拿到了Navigator里面的OverlayState.
网友评论