Flutter提示工具插件easy_tooltip的使用

easy_tooltip 是一个易于集成到 Flutter 应用程序中的库，用于创建具有自定义内容的现代提示工具。该库支持移动设备上的提示工具，允许您在屏幕上显示透明覆盖层，并通过点击屏幕上的任何地方来关闭气泡。同时，它也兼容 Flutter Web，但目前尚未支持悬停功能。

使用步骤

要将 easy_tooltip 添加到您的项目中，首先需要将其添加到 pubspec.yaml 文件中：

dependencies:
  easy_tooltip: ^x.y.z

然后运行 flutter pub get 来获取依赖项。

基本用法

使用 EasyTooltip 插件的基本方式非常简单。以下是一个基本示例，展示了如何在点击图标时显示提示信息。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter EasyTooltip'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 EasyTooltip 显示提示信息
            EasyTooltip(
              text: 'hello world!', // 提示信息文本
              backgroundColor: const Color(0xFF385E9D), // 背景颜色
              padding: const EdgeInsets.all(8), // 提示信息内边距
              onEasyTooltipTap: () {
                debugPrint('child is tapped.'); // 当子组件被点击时触发
              },
              onDismiss: () {
                debugPrint('tooltip is dismissed'); // 当提示工具消失时触发
              },
              child: const Icon(Icons.info_outlined), // 子组件，点击时显示提示信息
            ),
          ],
        ),
      ),
    );
  }
}

高级用法

EasyTooltip 还提供了许多配置选项，可以自定义提示工具的外观和行为。以下是高级用法的示例，包括设置最大宽度、箭头高度、圆角半径等属性。

EasyTooltip(
  text: 'hello world! hello world!hello world!hello world!hello world!hello world!hello world!hello world!', // 提示信息文本
  bubbleWidth: 300, // 最大宽度
  padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12), // 提示信息内边距
  backgroundColor: const Color(0xFF385E9D), // 背景颜色
  onEasyTooltipTap: () {
    debugPrint('child is tapped.'); // 当子组件被点击时触发
  },
  onDismiss: () {
    debugPrint('tooltip is dismissed'); // 当提示工具消失时触发
  },
  child: const Icon(Icons.info_outlined), // 子组件，点击时显示提示信息
)