我们在上一章回中介绍了"overlay_tooltip简介"相关的内容，本章回中将介绍OverlayTooltip用法.闲话休提，让我们一起Talk Flutter吧。

1. 知识回顾

我们在上一章回中介绍了overlay_tooltip包的功能以及包中相关的组件，该包提供了OverlayTooltip和OverlayTooltipScaffold两个组件，前者用来解释页
面中某个功能的用法，后者用来管理页面中的OverlayTooltip。该包主要用来实现首次使用引导，实现该功能的整体思路就是在页面中某个功能所在的位置插入一个
OverlayTooltip，用来解释该功能的使用方法。因为首次使用引导功能包含多个功能的使用方法，所以在整个页面上使用包中的组件(OverlayTooltipScaffold)
来管理所有的OverlayTooltip。

2. 使用方法

• 创建TooltipController对象，用来管理Tooltip；
• 创建OverlayTooltipScaffold组件，并且把页面的Scaffold组件赋值给它的builder属性；
• 配置OverlayTooltipScaffold组件的controller，startWhen和preferredOverlay等属性；
• 在builder属性对应的scaffold组件中添加OverlayTooltipItem组件，用来显示OverlayTooltip；
• 在页面销毁时释放TooltipController对象，以名引起内存泄漏；
  上面的步骤中大家重点关注一下startWhen和preferredOverlay属性；前者用来控制OverlayTooltip的启动时机，后者用来显示模糊层，通常会在模糊层上添加
  点击事件，这样就可以在点击模糊层的时候切换不同的OverlayTooltip。大家可能觉得这些内容比较抽象，我们将在后面的小节中通过示例代码来演示。

3. 代码与功能

3.1 示例代码

final TooltipController tooltipController = TooltipController();
bool done = false;@override
void initState() {tooltipController.onDone(() {setState(() {done = true;});});super.initState();
}@override
void dispose() {tooltipController.dispose();super.dispose();
}OverlayTooltipScaffold(controller: tooltipController,startWhen: (initValue) async {debugPrint("start tool tip value:$initValue");await Future.delayed(const Duration(seconds: 1,),);debugPrint(" 1s later start tool tip value:$initValue");///这个3是tips的数量,它值是最后一个toolTip的值加1： displayIndex: 2,return initValue == 3 && !done;
},overlayColor: Colors.blueAccent,///第个点击后跳转到下一个tip的时间tooltipAnimationDuration: const Duration(milliseconds: 100),///这个是在模糊层上(除了tooltip位置外)任意位置上点击时的事件，它主要用来切换不同的tooltipspreferredOverlay: GestureDetector(onTap: () {// ///跳转到最后一个tips的时候停止跳转if(tooltipController.nextPlayIndex == 1) {debugPrint("stop tips");tooltipController.dismiss();} else {debugPrint("next tips");tooltipController.next();}},child: Container(width: double.infinity,height: double.infinity,color: Colors.yellowAccent.withOpacity(.8),),),builder: (BuildContext context) {return Scaffold(appBar: AppBar(actions: [SizedBox(width: 80,child: TextButton(onPressed: () {},child: const Text("action1")),),///在这里加入toolTip 1OverlayTooltipItem(displayIndex: 0,tooltipVerticalPosition: TooltipVerticalPosition.TOP ,tooltip: (tooltipController) {debugPrint("show tool tip tips");return const Padding(padding: EdgeInsets.all(16),///toolTip显示的内容，可以看作是对child中内容的解析,tooltip消失后它会随之消失child: Text("this is tool tip1"),);},///需要显示toolTip的内容，这个值会一直显示在,它是页面上正常的内容child: const Text("index 0 Tip")),],),body: Column(children: [///充当标题const Center(child: Text(" Picked image and video"),),ElevatedButton(onPressed: () {},child: const Text("Pick Image by Camera"),),///在这里加入toolTip 2OverlayTooltipItem(displayIndex: 1,tooltip: (tooltipController) {debugPrint("show tool tip tips");return const Padding(padding: EdgeInsets.all(16),child: Text("this is tool tip2",),);},child: const Text("index 1 Tip")),const SizedBox(height: 120,),///在这里加入toolTip 3OverlayTooltipItem(displayIndex: 2,tooltipVerticalPosition: TooltipVerticalPosition.BOTTOM,tooltip: (tooltipController) {debugPrint("show tool tip tips2");return Padding(padding: const EdgeInsets.all(16),///toolTip显示的内容，可以看作是对child中内容的解析,tooltip消失后它会随之消失child: Column(children: [///这个只是为了显示漂亮而加的装饰框Container(color: Colors.greenAccent,padding: const EdgeInsets.all(8),child: const Text("this is tool tip2")),///专门指定了一个按钮点击时切换到下一个tipElevatedButton(onPressed:() { tooltipController.next();},style: ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16),side: const BorderSide(color: Colors.white,width: 2,),),backgroundColor: Colors.black,foregroundColor: Colors.white),child: const Text("Next",),),],),);},///需要显示toolTip的内容，这个值会一直显示在,它是页面上正常的内容///这个只是为了显示漂亮而加的装饰框child: Container(padding: const EdgeInsets.all(8),decoration: BoxDecoration(borderRadius: BorderRadius.circular(90),color: Colors.white),child: const Text("index 2 Tip"))),],),);},
);

上面的示例代码完全按照实现方法中的内容来实现，我们在代码中的关键位置添加了注释，这样方便大家理解代码。代码中添加了三个OverlayTooltipItem，分别位于
页面的AppBar,按钮上。也就是说这些toolTip会对AppBar和按钮做功能解释，不过示例中没有对功能做解释，只是简单地显示一个文本。编译并且运行上面的程序可以
看到整个页面呈现模糊层，首先是在页面的AppBar位置显示ToolTip,点击模糊层后切换到下一个ToolTip,直到最后一个ToolTip时停止显示模糊层，页面恢复正常。
我在这里注不演示程序的运行结果了，建议大家自己动手去实践一下。

3.2 功能说明

本小节中我们重点说一下示例代码中的相关功能，这些功能比较重要，而且包含很多细节：

• 启动功能：该功能对应startWhen属性，它除了在页面的initState()方法中启动Overlay外，还包含toolTip的数量，因为该属性是方法类型，所以通过方法的
  参数传递toolTip的数量；当该属性对应的方法返回true时才可以启动Overlay.示例代码中对启动条件加了两个条件：一个是done为true,它表示页面初始化完成了；
  另外一个是tooltip的数量等于3.它表示显示的toolTip的实际页面中的tooltip数量相同。
• 模糊层：该功能主要显示一个模糊图层，可以控制图层的颜色和透明度，还可以在图层响应事件，示例代码中就添加了事件响应功能；
• OverlayTooltipItem的tooltip属性：它是Widget类型，可以自定义组件，也就是说对某个功能进行解释时可以显示成方矩形文本，圆形文件，或者向对话框窗口
  一样，示例代码中前两个toolTip功能比较简单，第三个toolTip做了包含详细的自定义功能。

4. 内容总结

最后，我们对本章回的内容做一个全面总结：

• 我们可以使用OverlayTooltip来解释页面中的某个功能；
• 我们可以使用OverlayTooltipScaffold管理页面中所有的OverlayTooltip;
• 在使用OverlayTooltipScaffold时注意它的启动功能，模糊层功能；
• 在使用OverlayTooltip时可以用它默认的文本来解释功能，也可以添加自定义的组件；
  看官们，与"OverlayTooltip用法"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论