轻提示的效果在应用中是少不了的,其实Flutter已经准备好了轻提示控件,这就是toolTip

轻量级操作提示

其实Flutter中有很多提示控件,比如DialogSnackbarBottomSheet这些操作都是比较重量级的,存在屏幕上的时间较长或者会直接打断用户的操作。

当然并不是说这些控件不好,根据需求的不同,要有多种选择,所以才会给大家讲一下轻量级操作提示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控件的更多相关文章

  1. onmouseover 执行 ToolTip 控件

    Tooltip控件是一个简单,但非常有用的控件.它能够为我们的软件提供非常漂亮的提示信息,提高软件的可用性,给用户比较好的体验.假设现在有两个按钮,一个用来预览吊线世系图,一个用来预览行转.为了保持按 ...

  2. Flutter样式和布局控件简析(二)

    开始 继续接着分析Flutter相关的样式和布局控件,但是这次内容难度感觉比较高,怕有分析不到位的地方,所以这次仅仅当做一个参考,大家最好可以自己阅读一下代码,应该会有更深的体会. Sliver布局 ...

  3. Flutter Form表单控件超全总结

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form.FormField.TextFormField是 ...

  4. Flutter 日期时间DatePicker控件及国际化

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 DatePicker Flutter并没有DatePick ...

  5. Flutter 强大的MediaQuery控件

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQu ...

  6. Flutter 分页功能表格控件

    老孟导读:前2天有读者问到是否有带分页功能的表格控件,今天分页功能的表格控件详细解析来来. PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTabl ...

  7. Slider.js轻量级图片播放控件

    Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...

  8. 轻量级的惰性控件——ViewStub

    在开发过程中,有时候,需要这样一种控件,正常情况下不可见,不占用任何布局空间,只在某种特定情况下显示,这种情况下,我们使用一个普通的View,利用设置setVisibility(View.GONE)自 ...

  9. 使用bootstrap tooltip控件动态修改提示内容

    初始化控件之后即使修改了元素的title内容也不会更改提示信息,比如下面 $(element).attr('title','XXXXXX') 这样只会增加一个原生的title提示,如果保持原样显示必须 ...

随机推荐

  1. 《流畅的Python》Data Structures--第2章序列array

    第二部分 Data Structure Chapter2 An Array of Sequences Chapter3 Dictionaries and Sets Chapter4 Text vers ...

  2. Selenium(五)鼠标和键盘事件

    1.模拟鼠标找到大分类下的子分类.以网易严选为例. 如果直接找到  坚果炒货 这个元素,然后点击它来实现跳转,是会报错的. 模拟鼠标停留--点击行为:  页面已成功跳转 2.键盘事件 模拟搜索操作: ...

  3. nginx中ngx_http_ssl_module模块

    此模块为HTTPS提供必要的⽀支持worker_processes auto;http {...server {listen 443 ssl;keepalive_timeout 70;ssl_prot ...

  4. C语言实现的文件交互

    计算机与外部设备的交互依靠文件完成 文件是记录在外部介质上的数据的集合:例如1.c 是源码 1.exe可执行的文件 文件的分类 按组织结构: 记录文件:有一定结构的文件,可以解析成字段值的文件: 流式 ...

  5. HDU 3824/ BZOJ 3963 [WF2011]MachineWorks (斜率优化DP+CDQ分治维护凸包)

    题面 BZOJ传送门(中文题面但是权限题) HDU传送门(英文题面) 分析 定义f[i]f[i]f[i]表示在iii时间(离散化之后)卖出手上的机器的最大收益.转移方程式比较好写f[i]=max{f[ ...

  6. mybatis-plus 相关

    这里有几个很全的教程: https://www.cnblogs.com/okong/p/mybatis-plus-guide-one.html mybtais-plus学习--BaseMapper提供 ...

  7. 百度ueditor中复制word图文时图片转存任然保持灰色不可用

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  8. learning express step(十三)

    learning express error handle code: const express = require('express'); const app = express(); app.g ...

  9. setsockopt函数

    #include <sys/socket.h>     int setsockopt( int socket, int level, int option_name,            ...

  10. 51nod 1503

    动态规划 $f[a][b][c][d]$ 表示从 $(1, 1)$ 走到 $(a, b)$ 和从 $(n, m)$ 走到 $(c, d)$ 的方案数 $f[a][b][c][d]$ $= f[a][b ...