第三十八回：Tooltip Widget

最新推荐文章于 2024-09-04 23:25:17 发布

原创最新推荐文章于 2024-09-04 23:25:17 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #toottip #悬浮窗口 #弹出窗口

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

本文介绍了Flutter中的TooltipWidget，它是一种在组件上悬停或长按时显示附加信息的弹出窗口。文章详细讲解了Tooltip的属性，如height、waitDuration、showDuration、message、textStyle、decoration和child，并提供了示例代码展示如何创建和定制Tooltip。作者还分享了关于长按时间和文字颜色选择的经验建议。

我们在上一章回中介绍了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'),
    ),
  );
}