文章目录
- 1. 概念介绍
- 2. 思路与方法
- 2.1 实现思路
- 2.2 使用方法
- 3. 内容总结
我们在上一章回中介绍了"如何在页面上显示蒙板层"相关的内容,本章回中将介绍overlay_tooltip这个三方包.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的overlay_tooltip包是一个三方包,它是尼日利亚的一个开发者开发的,主要用来实现实现首次使用App时的功能引导。这个功能引导就是在某
个功能上显示功能的介绍(包中叫OverlayTooltip),同时把功能区域高亮显示,其它区域(包中叫 Overlay)模糊显示,然后点击下一步时继续以相同的方式介绍
其它功能区域。我估计大家都用过该功能,通常在首次安装和使用App时会出现。本章回中将介绍如何使用overlay_tooltip包实现此功能。
2. 思路与方法
2.1 实现思路
包中提供了OverlayTooltip和OverlayTooltipScaffold两个组件,前者用来解释页面中某个功能的用法,后者用来管理页面中的OverlayTooltip。整体的实现
思路就是在页面中某个功能所在的位置插入一个OverlayTooltip,用来解释该功能的使用方法。因为我们会介绍多个功能的使用方法,所以在整个页面上使用包中的组
件(OverlayTooltipScaffold)来管理所有的OverlayTooltip。
2.2 使用方法
在上一小节中我们提到了包中的OverlayTooltip和OverlayTooltipScaffold这两个组件,接下来我们介绍一下它们的用法。
OverlayTooltip是组件的泛称,它对应包中的OverlayTooltipItem组件,该组件提供了相关的属性来控制自己,详细如下:
- displayIndex属性:用来控制该组件的顺序,表示所有功能中的第n个功能;
- tooltipVerticalPosition属性:用来控制组件的位置,比如位于功能的下方;
- tooltip属性:用来显示功能的用法,它类似常用的Builder组件;
- child属性:这个主要用来存放页面中的功能;
总之,OverlayTooltip组件类似容器类组件,它会把页面中的某个功能当作容器中的内容,它会在内容上下左右四个方向上显示一个组件,这个组件可以自定义,它主
要用来解释容器中功能的使用方法。
OverlayTooltipScaffold组件,主要用来管理OverlayTooltipItem,该组件提供了相关的属性来控制自己,详细如下: - startWhen属性:用来启动功能演示,它是方法类型;
- overlayColor属性:用来控制模糊显示时的颜色;
- tooltipAnimationDuration属性:从当前toolTip跳转到下一个ToolTip的时间;
- preferredOverlay属性:用来控制模糊层(Overlay),它是Widget类型;
用来响应点击事件,可以在点击事件中切换不同的ToolTip;
- builder属性:主要用来存放页面组件,它的用法和Builde组件中同名属性用法相同;
总之,OverlayTooltipScaffold组件类似容器类组件,它会把整个页面当作容器中的内容,这点从它的名字中也可以看出来,它主要用来管理页面中所有的
OverlayTooltip,比如切换OverlayTooltip。
3. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- overlay_tooltip这个包主要用来实现首次使用引导功能;
- 包中提供了OverlayTooltip组件用来对某个功能进行介绍;
- 包中提供了OverlayTooltipScaffold组件用来管理包中所有的toolTip;
看官们,与"overlay_tooltip简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!