第三十八回:Tooltip Widget

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


我们在上一章回中介绍了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就介绍到这里,欢迎大家在评论区交流与讨论!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏,手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值