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