文章目录
- 1. 知识回顾
- 2. 组件介绍
- 2.1 OverlayTooltip
- 2.2 onBoarding
- 2.3 OverlayEntry
- 3.对比和总结
- 3.1 功能对比
- 3.2 经验总结
我们在上一章回中介绍了"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组件的对比和总结"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
