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提示,如果保持原样显示必须 ...
随机推荐
- JavaScript查漏补缺
js函数定义的三种方式: 函数声明 function sum(a,b){ return a+b } 函数表达式 var sum = function(a,b){ return a+b } Functi ...
- Python和Shell交互工具 ShellPy
ShellPy 是一款Python和Shell的交互工具.一般来说,我们会通过Subprocess.Popen或者Command模块执行一条Shell命令或脚本,然后通过返回的标准输出和错误输出来得到 ...
- python大战EXCEL--xlwings
xlwings的特色 xlwings能够非常方便的读写Excel文件中的数据,并且能够进行单元格格式的修改 可以和matplotlib以及pandas无缝连接 可以调用Excel文件中VBA写好的程序 ...
- 用Qt 画一个心形
MainWindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QTi ...
- Android系统输入事件分发详解
什么是输入事件? 我们知道,运行android系统的设备本质上是一台计算机,使用者在和计算机进行交互的时候可以抽象成简单的对计算机的输入和输出(IO).那么对于运行在计算机上的操作系统来说,操作系统在 ...
- CF633C Spy Syndrome 2 trie树
这个模型以前绝对见过,模拟赛的时候开始敲了一个AC自动机,纯属脑抽~ code: #include <bits/stdc++.h> #define N 5000006 #define NN ...
- luogu P1553 数字反转(升级版)
P1553 数字反转(升级版) 直通 思路: 首先使用char数组进行读入,然后直接按照题目要求进行反转即可, 但要注意的是对零的处理:(有点类似于高精去除前导零) ①去除只是整数.百分数的时候,反转 ...
- Doki Doki Literature Club ZOJ - 4035
Doki Doki Literature Club ZOJ - 4035 题解:其实就是简单排序输出就没了. #include <cstdio> #include <cstring& ...
- nginx下载 并将vue项目部署上去
这是一个比较全的nginx配置说明:新手可以先忽略,直接往下看:https://www.cnblogs.com/findbetterme/p/11289273.html nginx官网下载地址:htt ...
- SpringMVC 指定404、500错误页面
1.在web.xml中追加 <error-page> <error-code>404</error-code> <location>/404</l ...