第四百二十四回 多种Overlay组件的对比和总结

我们在上一章回中介绍了"OverlayEntry组件"相关的内容，本章回中将介绍 多种Overlay组件的对比和总结.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在前面章回中主要介绍了如何实现首次功能引导，我们一共介绍了三种组件来实现该功能，这三种组件的都有各自的优点和缺点。本章回中将对这三种组件进行对比和总结，这样方便大家在实现首次功能引导时参考，进而选择一个符合自己需求的组件。

2. 组件介绍

2.1 OverlayTooltip

这个包是三方包，不过在pub库中评价比较高，它提供了OverlayTooltipItem组件用来给页面中的某个功能做解释，被解释的功能组件只需要赋值给该组件的child属性就可以，因此它的用法类似官方的Container组件，使用十分方便。

Overlay上显示的内容默认在一个矩形方框中，通过该组件的tooltip属性控制，该属性属于widget类型，因此我们可以自定义组件解释相关的内容。包中同时提供了Scaffold组件用来和管理多个OverlayTooltip，这里的管理包含显示，关闭和切换功能解释窗口(OverlayTooltip).

2.2 onBoarding

这个包是三方包，不过在pub库中评价比较高，从包中的名称也可以看出来它主要用来实现首次功能引导。它提供了OnboardingStep组件用来给页面中的某个功能做解释，该组件会赋值给被解释功能组件的focusNode属性，相当于通过组件的属性来给组件做功能解释，因此使用十分方便。

Overlay上显示的内容默认在一个带箭头的矩形方框中，组件提供了多种属性来控制模糊层上显示的内容，如果觉得默认的方框无法满足项目需求，那么可以自定义组件。

包中同时提供了Scaffold组件用来和管理多个OnboardingStep，这里的管理包含显示，关闭和切换功能解释窗口.此时会用到onChanged属性和GlobalKey.

2.3 OverlayEntry

这个包是Flutter官方提供的包，它提供了OverlayEntry组件用来给页面中的某个功能做解释，它不需要和被解释的功能组件绑定在一起，通常会显示一个全屏的模糊层(Overlay),模糊层上的内容用作解释功能。该内容需要开发人员去实现，它由该组件的builder属性控制，这个属性和Builder组件中的build属性用法相同。

因为该组件没有和被解释功能的组件绑定在一起，所以想把它放到被解释功能的组件旁边时比较困难。包中没有提供类似Scaffold组件来管理多个OverlayEntry，我们只能显示和移除Overlay,因此它只适合做单个功能引导。

3.对比和总结

最后，我们对这三个组件进行对比和总结：

3.1 功能对比

• OverlayTooltip：提供自定义的Scaffold组件，通过该组件显示和切换多个OverlayTooltip(功能解释)，OverlayTooltip不固定，通过自定义的组件来实现。被解析的功能为OverlayTooltip的子组件，相当是在被解析的功能组件外层加了一个容器；
• onBoarding：提供自定义的Scaffold组件，通过该组件显示和切换多个OnboardingStep(功能解释)，OnboardingStep可以使用默认的样式，也就是带箭头的矩形框，或者通过自定义的组件来实现。OnboardingStep需要赋值给页面中某个的focusNode属性，或者通过Focus组件来实现。相当于被解析的功能组件的一个属性。
• OverlayEntry：没有提供自定义的Scaffold组件，因此它通常只能显示一个Overlay.

3.2 经验总结

如果大家想在自己的项目中实现首次功能引导，我们推荐使用前两个组件，特别推荐第二个组件，如果是只显示一个功能引导那么我们推荐使用OverlayEntry.

其实前两个组件的功能和用法十分相似，都是提供一个功能解释组件，并且把该组件和被解释的功能组件绑定在一起。然后通过自定义的Scaffold组件来管理多个功能解释组件。不过第二个组件(onBoarding)提供的功能解释组件比较灵活，它默认带有箭头，这是第一个组件不具备的功能。在大部分场景下使用默认的功能就可以，如果觉得默认功能无法满足需求，还可以自定义组件。因此相对而言它的功能比第一个组件要强大。此外，它还可以用在整个项目的根部，或者单个页面上。这样丰富了开发人员的选择。

看官们，与"多种Overlay组件的对比和总结"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!