第三十八回：Tooltip Widget

我们在上一章回中介绍了BottomSheet Widget相关的内容,本章回中将介绍 Tootip Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的Tooltip也是一种弹出窗口，当指针悬停于某个组件上或者长按某个组件时，就会在组件下方弹出一个悬浮窗口，这个悬浮窗口就是Tooltip.

它经常用来提供某种组件的附加信息，或者提供某项操作的解释说明。本章回中将介绍Tooltip组件的使用方法。

使用方法

和其它Widget类似，我们可以通过Tooltip的属性来操作它，下面是一些常用的属性：

• height属性：用来控制弹出窗口的高度，窗口的宽度由窗口内容决定
• waitDuration属性：用来控制鼠标悬停等待时间，时间到达后显示tooltip
• showDuration属性：用来控制长按等待时间,时间到达后显示tooltip
• message属性：用来控制窗口中显示的内容；
• textStyle属性：用来控制窗口中文字的风格,比如文字颜色和字体大小；
• decoration属性:用来控制窗口的边框风格，比如圆角，边框颜色等；
• child属性:用来表示窗口附属的组件，当悬停或者长按该组件时弹出窗口；

示例代码

_showToolTip() {
  return Tooltip(
    //提示框的高度，宽度自适应文字长度.
    height: 100,
    //鼠标悬停等待时间，时间到达后显示tooltip
    // waitDuration: Duration(seconds: 2),
    //长按等待时间,时间到达后显示tooltip
    showDuration: const Duration(seconds: 3),
    message: "This is the message of ToolTip",
    //建议设置文字颜色，默认为白色,不容易看到
    textStyle: const TextStyle(
      color: Colors.black,
      fontSize: 20,
    ),
    decoration: BoxDecoration(
      border: Border.all(
        color: Colors.green,
        width: 2,
      ),
      borderRadius: BorderRadius.circular(30),
    ),
    child: Container(
      alignment: Alignment.center,
      width: 400,
      height: 300,
      child: Text('Show Tooltip'),
    ),
  );
}

我们在这里只列出了核心代码，完整的代码可以查看Github上ex020文件中的内容。编译并且运行上面的程序就可以在屏幕上看到一个文本组件，长按该文本组件时就会弹出一个绿色边框的悬浮窗口，窗口中显示黑色的文字，松开长按的手指后窗口会自动消失。我在这里就不演示程序运行结果了，建议大家自己动手去实践。

经验总结

最后，分享一些自己总结的经验：

• 建议把长按时间设置为三秒左右，这样的交互效果会好一些，当然了三秒只是一个经验值；
• 建议修改窗口中文字的颜色，默认文字颜色为白色，如果界面背景也是白色，就不容易看到文字；
• 建议给窗口添加装饰，因为这样便于观察弹出的窗口，而且看上去更加富有立体感；

看官们，关于TooltipWidget就介绍到这里，欢迎大家在评论区交流与讨论!