Flutter进阶实战 17-20 轻提示ToolTip控件实例

最新推荐文章于 2024-08-23 16:40:40 发布

一醉南柯

最新推荐文章于 2024-08-23 16:40:40 发布

阅读量2.1k

点赞数

分类专栏： # Flutter进阶

本文链接：https://blog.csdn.net/dpl12/article/details/99615335

版权

Flutter进阶专栏收录该内容

15 篇文章 1 订阅

订阅专栏

前言：

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

实现效果：

知识点：

轻量级操作提示

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

当然我并不是说这些控件不好，根据需求的不同，要有多种选择，所以才会给大家讲一下轻量级操作提示Tooltip

Tooltip是继承于StatefulWidget的一个Widget，它并不需要调出方法，当用户长按被Tooltip包裹的Widget时，会自动弹出相应的操作提示。

实现代码：

main.dart文件代码如下：

import 'package:flutter/material.dart';
import 'tool_tips_demo.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToolTipDemo(),
    );
  }
}

tool_tips_demo.dart文件代码如下：

import 'package:flutter/material.dart';

class ToolTipDemo extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('tool tip demo')),
      body: Center(
        child: Tooltip(
          message: '你好，我是天海翼！',
          child: Image.network('http://upload.taihainet.com/news/UploadFiles_6334/201312/20131226073321886_m.jpg'),
        ),
      ),
    );
  }
}