欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第九十八:Tooltip

程序员文章站 2022-03-11 19:16:28
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Tooltip是一个消息提示组件,当用户点击或者长按时显示提示,在屏幕阅读器能够使它语音化,这有助于视力障碍人士阅读,用法如下:

Tooltip(
  message: '这是提示',
  child: Icon(Icons.storage),
)

效果如下:

《Flutter 控件大全》第九十八:Tooltip

我们还可以设置提示的宽高、内外边距、垂直偏移,用法如下:

Tooltip(
  padding: EdgeInsets.all(2.0),
  margin: EdgeInsets.all(5.0),
  verticalOffset: 2,
  message: '这是提示',
  child: Icon(Icons.storage),
)

设置样式及字体样式,用法如下:

Tooltip(
  textStyle: TextStyle(color: Colors.blue),
  decoration: BoxDecoration(
    color: Colors.red
  ),
  message: '这是提示',
  child: Icon(Icons.storage),
)

效果如下:

《Flutter 控件大全》第九十八:Tooltip

设置显示和等待时长,用法如下:

Tooltip(
  waitDuration: Duration(seconds: 1),
  showDuration: Duration(seconds: 2),
  message: '这是提示',
  child: Icon(Icons.storage),
)