文章目录
- 1. 知识回顾
- 2. 使用方法
- 3. 代码与功能
- 3.1 示例代码
- 3.2 功能说明
- 4. 内容总结
我们在上一章回中介绍了"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;
void initState() {
tooltipController.onDone(() {
setState(() {
done = true;
});
});
super.initState();
}
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位置外)任意位置上点击时的事件，它主要用来切换不同的tooltips
preferredOverlay: 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 1
OverlayTooltipItem(
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 2
OverlayTooltipItem(
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 3
OverlayTooltipItem(
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")),
///专门指定了一个按钮点击时切换到下一个tip
ElevatedButton(
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用法"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论
![[StartingPoint][Tier2]Archetype](https://img-blog.csdnimg.cn/img_convert/4db13216eba6070eb871d3b62c8b450b.jpeg)
