Flutter提示工具插件simple_tooltip的使用

simple_tooltip 是一个用于创建气球形状提示工具的插件。您可以自定义多个元素，如方向、动画时长、背景颜色等。

💻 安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  simple_tooltip: <latest version>

请确保将 <latest version> 替换为该插件的最新版本号。

使用

基本用法

您可以非常简单地开始使用 SimpleTooltip，只需添加以下代码：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Tooltip Example'),
      ),
      body: Center(
        child: SimpleTooltip(
          tooltipTap: () {
            print("Tooltip tap");
          },
          animationDuration: Duration(seconds: 3),
          show: true,
          tooltipDirection: TooltipDirection.up,
          child: Container(
            width: 200,
            height: 120,
            color: Colors.blue,
            child: Center(child: Text('Press me')),
          ),
          content: Text(
            "Some text example!!!!",
            style: TextStyle(
              color: Colors.black,
              fontSize: 18,
              decoration: TextDecoration.none,
            ),
          ),
        ),
      ),
    );
  }
}

全部 API

以下是 SimpleTooltip 的完整 API 列表：

• child: 要显示提示的目标组件。
• tooltipDirection: 提示的方向，默认为 TooltipDirection.up。
• content: 提示内容。
• show: 是否显示提示。
• ballonPadding: 内容的填充，默认为 EdgeInsets.symmetric(horizontal: 20, vertical: 16)。
• animationDuration: 动画时长，默认为 460 毫秒。
• top, right, bottom, left: 相对于屏幕的绝对位置。
• minWidth, minHeight, maxWidth, maxHeight: 尺寸约束。
• arrowTipDistance: 箭头尖端到目标中心的距离。
• arrowLength: 箭头长度。
• borderWidth: 边框宽度。
• minimumOutSidePadding: 提示到屏幕边缘的最小间距。
• borderRadius: 边框圆角半径。
• arrowBaseWidth: 箭头底部宽度。
• borderColor: 边框颜色。
• backgroundColor: 背景颜色。
• customShadows: 自定义阴影列表。
• tooltipTap: 提示点击事件处理函数。
• hideOnTooltipTap: 是否在点击提示后自动隐藏。
• routeObserver: 路由观察者。

示例 Demo

以下是一个完整的示例项目，包含基本用法和导航页面：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Tooltip Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SimpleTooltip(
              tooltipTap: () {
                print("Tooltip tap");
              },
              animationDuration: Duration(seconds: 3),
              show: true,
              tooltipDirection: TooltipDirection.up,
              child: Container(
                width: 200,
                height: 120,
                color: Colors.blue,
                child: Center(child: Text('Press me')),
              ),
              content: Text(
                "Some text example!!!!",
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  decoration: TextDecoration.none,
                ),
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(builder: (context) => SecondPage()));
              },
              child: Text('Go to Next Page'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: SimpleTooltip(
          tooltipTap: () {
            print("Second Tooltip tap");
          },
          animationDuration: Duration(seconds: 3),
          show: true,
          tooltipDirection: TooltipDirection.down,
          child: Container(
            width: 200,
            height: 120,
            color: Colors.green,
            child: Center(child: Text('Second Page')),
          ),
          content: Text(
            "Another text example!!!!",
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              decoration: TextDecoration.none,
            ),
          ),
        ),
      ),
    );
  }
}

此示例展示了如何在两个页面中使用 SimpleTooltip 组件，并通过按钮进行页面导航。

希望这些信息对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。