zoukankan      html  css  js  c++  java
  • Flutter 轻量级的ToolTip控件

    轻提示的效果在应用中是少不了的,其实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'),
            ),
          )
        );
      }
    }
  • 相关阅读:
    JS控制台打印星星,总有你要的那一款~
    css居中方法
    line-height
    position定位
    IE盒子模型
    CSS中的盒模型
    CSS中的BEM命名
    循环语句总结(代码以C#为例)
    程序设计中的数学思维函数总结(代码以C#为例)
    转:SpringBoot 自定义异常@ContollerAdvice ExceptionHandler不起作用
  • 原文地址:https://www.cnblogs.com/joe235/p/11236861.html
Copyright © 2011-2022 走看看