Flutter自定义提示框插件custom_tooltip的使用

custom_tooltip 是一个为Flutter应用程序提供的高度可定制的tooltip（提示框）小部件，适用于桌面和移动平台，提供丰富的功能。

特性

• 灵活的内容：支持任何小部件作为子元素和提示框内容。
• 可定制的外观：
  • 可调整的提示框宽度和高度
  • 可自定义的背景颜色
  • 可配置的圆角半径
  • 自定义内边距
  • 可调整的阴影效果
  • 提供自定义装饰选项
  • 可自定义文本样式
• 智能定位：自动调整位置以适应屏幕边界。
• 时间控制：
  • 可配置的悬停延迟显示提示框的时间
  • 可调整的显示和隐藏持续时间以实现平滑动画
• 特定于平台的行为：
  • 桌面和Web平台的悬停功能
  • 移动平台的触摸支持
• 交互特性：
  • 提示框可以通过点击/轻触固定
  • 点击提示框外区域可以关闭它
• 动画展示：平滑的淡入和淡出动画

入门指南

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  custom_tooltip: ^1.0.0

然后，在Dart代码中导入包：

import 'package:custom_tooltip/custom_tooltip.dart';

基本用法

CustomTooltip(
  child: Text('Hover or tap me'),
  tooltip: Text('This is a custom tooltip'),
  tooltipWidth: 200,
  tooltipHeight: 100,
  backgroundColor: Colors.blue,
  borderRadius: 8,
  padding: EdgeInsets.all(8),
  elevation: 6.0,
)

高级用法

CustomTooltip(
  child: Icon(Icons.info),
  tooltip: Column(
    children: [
      Text('Custom Tooltip'),
      SizedBox(height: 10),
      ElevatedButton(
        child: Text('Action'),
        onPressed: () {
          // Handle button press
        },
      ),
    ],
  ),
  tooltipWidth: 250,
  tooltipHeight: 150,
  backgroundColor: Colors.black87,
  borderRadius: 12,
  padding: EdgeInsets.all(12),
  elevation: 8,
  hoverShowDelay: Duration(milliseconds: 500),
  showDuration: Duration(milliseconds: 300),
  hideDuration: Duration(milliseconds: 200),
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(12),
  ),
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
)

示例应用

下面是一个完整的示例应用，展示了如何使用 custom_tooltip 包创建不同类型的提示框：

import 'package:custom_tooltip/custom_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(
      title: 'Custom Tooltip Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Tooltip Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomTooltip(
              tooltip: const Text('This is a basic tooltip'),
              tooltipWidth: 200,
              tooltipHeight: 50,
              child: ElevatedButton(
                child: const Text('Basic Tooltip'),
                onPressed: () {},
              ),
            ),
            const SizedBox(height: 20),
            const CustomTooltip(
              tooltip: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text('Custom Styled Tooltip'),
                  Divider(),
                  Text('With multiple lines of text'),
                ],
              ),
              tooltipWidth: 200,
              tooltipHeight: 100,
              backgroundColor: Colors.black87,
              borderRadius: 12,
              padding: EdgeInsets.all(12),
              textStyle: TextStyle(color: Colors.white),
              child: Icon(Icons.info, size: 30),
            ),
            const SizedBox(height: 20),
            CustomTooltip(
              tooltip: const Center(child: Text('Gradient Background')),
              tooltipWidth: 200,
              tooltipHeight: 60,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Colors.blue, Colors.purple],
                ),
                borderRadius: BorderRadius.circular(12),
              ),
              textStyle: const TextStyle(color: Colors.white, fontSize: 16),
              child: Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Text('Hover for Gradient Tooltip'),
              ),
            ),
            const SizedBox(height: 20),
            CustomTooltip(
              tooltip: const Text('This tooltip has a longer hover delay'),
              tooltipWidth: 250,
              tooltipHeight: 80,
              hoverShowDelay: const Duration(seconds: 1),
              child: ElevatedButton(
                child: const Text('Delayed Tooltip'),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

通过上述代码，你可以创建一个包含多种提示框样式的Flutter应用。每个提示框都展示了 custom_tooltip 的不同特性和定制选项，如基本提示框、带有自定义样式的提示框、带有渐变背景的提示框以及具有更长悬停延迟的提示框。希望这个例子能帮助你更好地理解和使用 custom_tooltip 插件。