Flutter悬浮提示插件widget_tooltip的使用

Widget Tooltip Package

Widget Tooltip插件为Flutter应用程序提供了一个可以使用的悬浮提示小部件。

Installation

在您的pubspec.yaml文件中添加以下行来安装此包：

dependencies:
  widget_tooltip: ^version_number

请确保将^version_number替换为您想要安装的具体版本号，例如^1.0.0。

Usage

下面是一个简单的示例，展示了如何使用WidgetTooltip。这个例子创建了一个带有悬浮提示的按钮，当用户与之交互时，会显示一个消息。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Widget Tooltip Example'),
        ),
        body: Center(
          child: WidgetTooltip(
            message: Text('This is a tooltip message'),
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Press Me'),
            ),
          ),
        ),
      ),
    );
  }
}

WidgetTooltip Properties

以下是WidgetTooltip的一些常用属性及其描述：

• message: 悬浮提示中要显示的小部件。
• child: 目标小部件，悬浮提示将显示在其上。
• triangleColor: 悬浮提示三角形的颜色。
• triangleSize: 悬浮提示三角形的大小。
• triangleRadius: 悬浮提示三角形的圆角半径。
• targetPadding: 目标小部件和悬浮提示之间的填充。
• onShow: 当悬浮提示显示时调用的回调函数。
• onDismiss: 当悬浮提示消失时调用的回调函数。
• controller: 控制悬浮提示的控制器。
• messagePadding: 悬浮提示消息框的内边距。
• messageDecoration: 悬浮提示消息框的装饰。
• messageStyle: 消息文本样式。
• padding: 悬浮提示周围的外边距。
• axis: 悬浮提示显示的轴（垂直或水平）。
• triggerMode: 触发悬浮提示的方式。
• dismissMode: 关闭悬浮提示的方式。
• offsetIgnore: 是否忽略偏移。
• direction: 悬浮提示显示的方向。

示例代码

这里提供了一个更完整的示例，它包含了多种触发模式和关闭模式的悬浮提示，并且可以通过点击图标手动关闭悬浮提示。

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final TooltipController _tooltipController = TooltipController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            WidgetTooltip(
              controller: _tooltipController,
              triggerMode: WidgetTooltipTriggerMode.tap,
              dismissMode: WidgetTooltipDismissMode.manual,
              message: Container(
                width: 200,
                height: 200,
                color: Colors.deepPurple,
                child: Row(
                  children: [
                    Text(
                      'asdf',
                      style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white),
                    ),
                    IconButton(
                      onPressed: _tooltipController.dismiss,
                      icon: const Icon(Icons.delete),
                    )
                  ],
                ),
              ),
              axis: Axis.horizontal,
              child: const Text('Manual dismiss'),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                WidgetTooltip(
                  triggerMode: WidgetTooltipTriggerMode.tap,
                  dismissMode: WidgetTooltipDismissMode.tapAnyWhere,
                  message: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text('test', style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white)),
                      const FlutterLogo(),
                      Container(
                        width: 40,
                        height: 40,
                        color: Colors.deepPurple,
                      ),
                    ],
                  ),
                  padding: const EdgeInsets.all(24),
                  axis: Axis.vertical,
                  child: const Text('tap any where'),
                ),
                WidgetTooltip(
                  triggerMode: WidgetTooltipTriggerMode.tap,
                  dismissMode: WidgetTooltipDismissMode.tapInside,
                  message: Container(width: 200, height: 200, color: Colors.deepPurple, child: Text('asdf', style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white))),
                  padding: const EdgeInsets.all(48),
                  child: const Text('tap inside'),
                ),
              ],
            ),
            WidgetTooltip(
              triggerMode: WidgetTooltipTriggerMode.tap,
              dismissMode: WidgetTooltipDismissMode.tapOutside,
              message: Text('asdf', style: Theme.of(context).textTheme.titleLarge?.copyWith(color: Colors.white)),
              child: const Text('tap outside'),
            ),
          ],
        ),
      ),
    );
  }
}

通过以上内容，您可以了解如何在Flutter应用中集成并自定义WidgetTooltip插件。根据您的需求调整属性值，以实现理想的用户体验。