Flutter 轻量级的ToolTip控件
轻提示的效果在应用中是少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip。
轻量级操作提示
其实Flutter中有很多提示控件,比如Dialog、Snackbar和BottomSheet这些操作都是比较重量级的,存在屏幕上的时间较长或者会直接打断用户的操作。
当然并不是说这些控件不好,根据需求的不同,要有多种选择,所以才会给大家讲一下轻量级操作提示Tooltip。
Tooltip是继承于StatefulWidget的一个Widget,它并不需要调出方法,当用户长按被Tooltip包裹的Widget时,会自动弹出相应的操作提示。
child: Tooltip( //轻量级提示
message: "Don't touch",
child: Image.asset('images/lake.jpg'),
),

完整代码如下:
import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title:'Flutter Demo',
theme:ThemeData.light(),
home: ToolTipDemo(),
);
}
}
class ToolTipDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('tool tips demo')),
body:Center(
child: Tooltip(
message: "Don't touch 不要碰 ",
child: Image.asset('images/lake.jpg'),
),
)
);
}
}
Flutter 轻量级的ToolTip控件的更多相关文章
- onmouseover 执行 ToolTip 控件
Tooltip控件是一个简单,但非常有用的控件.它能够为我们的软件提供非常漂亮的提示信息,提高软件的可用性,给用户比较好的体验.假设现在有两个按钮,一个用来预览吊线世系图,一个用来预览行转.为了保持按 ...
- Flutter样式和布局控件简析(二)
开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...
- Flutter Form表单控件超全总结
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form.FormField.TextFormField是 ...
- Flutter 日期时间DatePicker控件及国际化
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePick ...
- Flutter 强大的MediaQuery控件
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQu ...
- Flutter 分页功能表格控件
老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl ...
- Slider.js轻量级图片播放控件
Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...
- 轻量级的惰性控件——ViewStub
在开发过程中,有时候,需要这样一种控件,正常情况下不可见,不占用任何布局空间,只在某种特定情况下显示,这种情况下,我们使用一个普通的View,利用设置setVisibility(View.GONE)自 ...
- 使用bootstrap tooltip控件动态修改提示内容
初始化控件之后即使修改了元素的title内容也不会更改提示信息,比如下面 $(element).attr('title','XXXXXX') 这样只会增加一个原生的title提示,如果保持原样显示必须 ...
随机推荐
- PHP批量更新MYSQL中的数据
原文链接:https://blog.csdn.net/wuming19900801/article/details/62893429 $sql = "update newhouse_clic ...
- 工作 巧遇 sql 查询 一组数据中 最新的一条
SELECT * FROM rsl a, (SELECT CODE, max(time_key) time_key FROM rsl GROUP BY CODE ) b WHERE a. CODE = ...
- python自动华 (九)
Python自动化 [第九篇]:Python基础-线程.进程及python GIL全局解释器锁 本节内容: 进程与线程区别 线程 a) 语法 b) join c) 线程锁之Lock\Rlock\ ...
- win10 UWP 动画
原文:win10 UWP 动画 本文告诉大家如何写同一个简单的动画. 动画入门 本文开始写一个简单的动画,只是移动矩形作为本文的例子. 在 UWP 移动元素的动画,可以使用 RenderTransfo ...
- 冒泡排序之javascript
冒泡排序是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果它们的顺序错误就把它们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字 ...
- 以下是Direct 3d的安装步骤
安装配置 真的是软肋 o( ̄ε ̄*) 我记录以下 步骤 防止下次忘记了 首先要安装到direct3d 之后在vs上配置 如下: 找到 安装direct3d的文件夹 复制路径(如下 我的路径为 G ...
- 【线性代数】7-1:线性变换思想(The Idea of a Linear Transformation)
title: [线性代数]7-1:线性变换思想(The Idea of a Linear Transformation) categories: Mathematic Linear Algebra k ...
- python写爬虫遇到需要解码js一些记录
js在线格式化网站 https://beautifier.io/ Python 执行 JS 代码 NodeJS 安装方式 先解决 JS 环境,这里推荐安装 Node.js ,安装方便,执行效率也高. ...
- fiddler在小米8下抓取https数据包.
问题,在小米8下一直报 证书链问题,爬了半天帖子发现可能是Android版本问题,有的说用Charles没问题. 没有测试,网上接着爬帖子... 稍稍说下导入证书的问题吧. 可以使用浏览器下载证书,也 ...
- 解决node-sass无法下载的问题
本文链接:https://blog.csdn.net/qq383366204/article/details/86605960在国内用npm安装依赖的时候经常都会有各种奇怪的问题,个人强烈推荐用yar ...