flutter 图解_Flutter 89: 图解基本 Overlay 悬浮新手引导

妖狐艹你老母 2023-01-09 12:47 115阅读 0赞

随着业务的扩展和延伸，需要的功能也是多种多样，而同一种效果可以有多种实现方案；小菜今天学习一下通过 Overlay 实现基本的悬浮引导效果；

Overlay 以浮层的方式管理单独的 item 存储在栈中(后进先出)；Overlay 其源码也是采用的 Stack 浮层，将 OverEntry 逐个加入到 Overlay 中进行展示，OverEntry 可以使用 Positioned 或 AnimatedPositioned 在 Overlay 中定义自身的位置；

当创建 MaterialApp 时，它会自动创建一个 Navigator，之后创建一个 Overlay，然后利用这个 Navigator 来管理路由中的界面；

源码分析

const Overlay(\{

Key key,

this.initialEntries = const \[\],

\})

class OverlayEntry

OverlayEntry(\{

@required this.builder,

bool opaque = false,

bool maintainState = false,

\})

分析源码可知，Overlay 主要是由 OverlayEntry 浮层元素组成的，并以栈的方式存储；opaque 为当前浮层元素是否遮盖整个 Overlay 浮层；maintainState 一般与 opaque 共同使用，是否将不透明的浮层元素添加到 Widget Tree 中；

案例尝试

Overlay 作为浮层的应用效果很广泛，网上很多老师都通过 Overlay 实现自定义 Toast / Dialog / PopupMenu / List item 等，但小菜尝试通过 Overlay 实现升级过程中的新手引导；

![Image 1][]

Overlay 主要是通过 insert / insertAll 方式加入 OverEntry 浮层元素，通过 remove 移除浮层元素；

insert One OverEnrty

如果仅需展示一个 OverEntry 浮层元素，可以通过 insert 加入到 Overlay 中，也可以通过 insertAll 加入仅有一个 OverEntry 的数组；最终通过 remove 关闭浮层元素，注意数组中的元素要全部 remove；

// insert

overlayEntry = OverlayEntry(builder: (context) \{

return Stack(children: \[Positioned(

top: (height - 200) \* 0.5, left: (width - 200) \* 0.5,

child: GestureDetector(

onTap: () => overlayEntry.remove(),

child: \_itemContainer(Colors.blue.withOpacity(0.6))))

\]);

\});

Overlay.of(context).insert(overlayEntry);

![Image 1][]

// insertAll

overlayEntry = OverlayEntry(builder: (context) \{

return Stack(children: \[Positioned(

top: (height - 200) \* 0.5, left: (width - 200) \* 0.5,

child: GestureDetector(

onTap: () \{ overlayEntry.remove(); overlayEntryList.clear(); \},

child: \_itemContainer(Colors.brown.withOpacity(0.6))))

\]);

\});

overlayEntryList.add(overlayEntry);

Overlay.of(context).insertAll(overlayEntryList);

![Image 1][]

insert Three OverEntrys

如果需要展示多个 OverEntry 浮层元素时，只能用 insertAll 添加到 Overlay 中，其中默认是以栈方式加入的；其中 insertAll 会一次性的把所有 OverEntry 均加入到 Overlay 中；

overlayEntryList.add(OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5 - 50, left: (width - 200) \* 0.5 - 50,

child: GestureDetector(

onTap: () \{

\--overIndex;

overlayEntryList\[overIndex\].remove();

overlayEntryList.removeLast();

\},

child: \_itemContainer(Colors.red.withOpacity(0.6))))

\]);

\}));

overlayEntryList.add(OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5, left: (width - 200) \* 0.5,

child: GestureDetector(

onTap: () \{

\--overIndex;

overlayEntryList\[overIndex\].remove();

overlayEntryList.removeLast();

\},

child: \_itemContainer(Colors.orange.withOpacity(0.6))))

\]);

\}));

overlayEntryList.add(OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5 + 50, left: (width - 200) \* 0.5 + 50,

child: GestureDetector(

onTap: () \{

\--overIndex;

overlayEntryList\[overIndex\].remove();

overlayEntryList.removeLast();

\},

child: \_itemContainer(Colors.blue.withOpacity(0.6))))

\]);

\}));

overIndex = overlayEntryList.length;

Overlay.of(context).insertAll(overlayEntryList);

![Image 1][]

若需要逐次展示多个 OverlayEntry 可以在点击事件中单独加入新的 OverlayEntry；

overlayEntry = OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5 - 50, left: (width - 200) \* 0.5 - 50,

child: GestureDetector(

onTap: () \{

overlayEntry.remove();

Overlay.of(this.context).insert(overlayEntry2);

\},

child: \_itemContainer(Colors.red.withOpacity(0.6))))

\]);

\});

overlayEntry2 = OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5, left: (width - 200) \* 0.5,

child: GestureDetector(

onTap: () \{

overlayEntry2.remove();

Overlay.of(this.context).insert(overlayEntry3);

\},

child: \_itemContainer(Colors.orange.withOpacity(0.6))))

\]);

\});

overlayEntry3 = OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5 + 50, left: (width - 200) \* 0.5 + 50,

child: GestureDetector(onTap: () => overlayEntry3.remove(), child: \_itemContainer(Colors.blue.withOpacity(0.6))))

\]);

\});

Overlay.of(context).insert(overlayEntry);

![Image 1][]

注意事项

1. Overlay 为全局覆盖，并非当前 Page，需要重新定义返回按键等；若没有 remove 则返回上一个页面依然展示浮层元素；若 remove 其他未加入浮层的元素会返回失败；

return WillPopScope(

onWillPop: () async \{

if (overListIndex == 6) \{

for (int i = overlayEntryList.length; i > 0; i--) \{

overlayEntryList\[i - 1\].remove();

overlayEntryList.clear();

overIndex = 0;

\} else if (overListIndex == 7) \{

overlayEntry.remove();

\} else if (overListIndex == 8) \{

overlayEntry2.remove();

\} else if (overListIndex == 9) \{

overlayEntry3.remove();

if (overIndex == 4) \{

overlayEntry.remove();

overlayEntry0.remove();

\} else if (overIndex == 3) \{

overlayEntry2.remove();

overlayEntry0.remove();

\} else if (overIndex == 2) \{

overlayEntry3.remove();

overlayEntry0.remove();

\} else if (overIndex == 5) \{

overlayEntry.remove();

overIndex = 0;

return true;

\},

child: Container(...)

);

![Image 1][]

2. 使用 insertAll 添加浮层元素时，不要同时加入多次同一个 OverlayEntry;

overlayEntry = OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned(top: (height - 200) \* 0.5 - 50, left: (width - 200) \* 0.5 - 50,

child: GestureDetector(

onTap: () => overlayEntry.remove(),

child: \_itemContainer(Colors.red.withOpacity(0.6))))

\]);

\});

// 错误写法，加入多次同一个 OverlayEntry

overlayEntryList.add(overlayEntry);

Overlay.of(this.context).insertAll(overlayEntryList);

![Image 1][]

3. opaque = true 时会完全覆盖之前的浮层元素，为不透明的，且不可透过当前浮层点击下一个浮层元素；maintainState 为在上层元素 opaque = true，即不透明的完全覆盖下层元素时，被覆盖的这个元素设置的 maintainState 是否提前构建；

overlayEntryList.add(OverlayEntry(builder: (context) \{

return Stack(children: \[

Positioned( top: (height - 200) \* 0.5 - 50, left: (width - 200) \* 0.5 - 50,

child: GestureDetector(

onTap: () \{ --overIndex; overlayEntryList\[overIndex\].remove(); \},

child: \_itemContainer(Colors.red.withOpacity(0.6))))

\]);

\}));

overlayEntryList.add(OverlayEntry(

opaque: true, maintainState: true,

builder: (context) \{

return Material(

color: Colors.amber.withOpacity(0.4),

child: Stack(children: \[

Positioned( top: (height - 200) \* 0.5, left: (width - 200) \* 0.5,

child: GestureDetector(

onTap: () \{ --overIndex; overlayEntryList\[overIndex\].remove(); \},

child: \_itemContainer(Colors.orange.withOpacity(0.6))))

\]));

\}));

overlayEntryList.add(OverlayEntry(

opaque: true, maintainState: false,

builder: (context) \{

return Material(

color: Colors.lightBlueAccent.withOpacity(0.4),

child: Stack(children: \[

Positioned( top: (height - 200) \* 0.5 + 50, left: (width - 200) \* 0.5 + 50,

child: GestureDetector(

onTap: () \{ --overIndex; overlayEntryList\[overIndex\].remove(); \},

child: \_itemContainer(Colors.blue.withOpacity(0.6))))

\]));

\}));

overIndex = overlayEntryList.length;

Overlay.of(context).insertAll(overlayEntryList);

![Image 1][]

小菜对 Overlay 的尝试还比较基础，使用场景也比较小，如有错误，请多多指导！

阿策小和尚

[Image 1]:

flutter 图解_Flutter 89: 图解基本 Overlay 悬浮新手引导

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Flutter系列文章-Flutter基础

相关 FLUTTER

相关 Flutter 悬浮按钮 FloatingActionButton 的详细配置使用

相关 Flutter AnimatedBuilder 的基本使用

相关 flutter 图解_Flutter 89: 图解基本 Overlay 悬浮新手引导

相关 android 渐变蒙版_Flutter新手引导蒙版（浮层）

相关 flutter布局中的单位_在Flutter中创建基本布局

相关 Flutter自绘组件：微信悬浮窗

相关 Flutter -------- 新手 WanAndroid 项目练习

相关 flutter 上架IOS流程（新手教程）