Flutter提示工具插件just_the_tooltip的使用

just_the_tooltip 是一个比Flutter标准 Tooltip 更加灵活的插件，允许你设置任意内容。它扩展了单轴布局算法，以适应垂直和水平方向。提示工具可以沿任何轴定位，并在溢出时回退到相反的一侧。

Breaking Changes

• 移除了 JustTheTooltip.entry 命名构造函数，改为使用专用的小部件 JustTheTooltipEntry。这一改变明确区分了提示工具的显示位置和方式。

快速开始

JustTheTooltip(
  child: Material(
    color: Colors.grey.shade800,
    shape: const CircleBorder(),
    elevation: 4.0,
    child: const Padding(
      padding: EdgeInsets.all(8.0),
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
    ),
  ),
  content: const Padding(
    padding: EdgeInsets.all(8.0),
    child: Text(
      'Bacon ipsum dolor amet kevin turducken brisket pastrami, salami ribeye spare ribs tri-tip sirloin shoulder venison shank burgdoggen chicken pork belly. Short loin filet mignon shoulder rump beef ribs meatball kevin.',
    ),
  ),
)

使用控制器管理状态

你可以通过定义一个 JustTheController 实例来管理提示工具的状态，并将其传递给构造函数：

final tooltipController = JustTheController();

@override
void initState() {
  super.initState();
  
  // 程序化地显示提示工具两秒后
  Future.delayed(const Duration(seconds: 2), () {
    tooltipController.showTooltip(immediately: false);
  });

  tooltipController.addListener(() {
    print('controller: ${tooltipController.value}');
  });
}

// 在你的Widget树中使用
child: JustTheTooltip(
  controller: tooltipController,
  child: ...,
  content: ...
)

回调函数

如果你只想对打开或关闭状态做出反应，可以通过默认构造函数传递 onDismiss 或 onShow 回调：

JustTheTooltip(
  onDismiss: () {
    // 可能继续教程？
  },
  onShow: () {
    // 开始动画？
  },
  child: ...,
  content: ...
)

自定义选项

模态提示工具

你可以通过定义 isModal 属性来进一步指定 Tooltip 的显示方式。模态提示工具仅通过点击 child 打开，并通过点击背景区域（称为 skrim）关闭。非模态（默认）是更传统的提示工具，在悬停时打开和关闭。

注意：手机模拟器不实现鼠标控制。要测试悬停状态，请使用浏览器。

自定义尾部构建器

如果你想为提示工具绘制自定义尾部（对话框气泡末端的突起），可以通过传递自己的 tailBuilder 来实现。JustTheInterface.defaultTailBuilder（默认）展示了如何简单地绘制并返回路径：

Path defaultTailBuilder(Offset tip, Offset point2, Offset point3) {
  return Path()
    ..moveTo(tip.dx, tip.dy)
    ..lineTo(point2.dx, point2.dy)
    ..lineTo(point3.dx, point3.dy)
    ..close();
}

库还提供了一个简单的贝塞尔曲线尾部构建器 JustTheInterface.defaultBezierTailBuilder。

示例完整Demo

以下是一个完整的示例代码，演示了如何在列表视图中使用 JustTheTooltipEntry：

import 'package:flutter/material.dart';
import 'package:just_the_tooltip/just_the_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: const Text('It goes under me')),
      body: JustTheTooltipArea(
        builder: (context, tooltip, scrim) {
          return Stack(
            fit: StackFit.passthrough,
            children: [
              ListView.builder(
                itemCount: 30,
                itemBuilder: (context, index) {
                  if (index == 15) {
                    return JustTheTooltipEntry(
                      tailLength: 10.0,
                      preferredDirection: AxisDirection.down,
                      isModal: true,
                      margin: const EdgeInsets.all(20.0),
                      child: const Material(
                        color: Colors.blue,
                        shape: CircleBorder(),
                        elevation: 4.0,
                        child: Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(
                            Icons.touch_app,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Container(
                            height: 120,
                            color: Colors.blue,
                            width: double.infinity,
                          ),
                          const SizedBox(height: 8),
                          const Text(
                            'Quia ducimus eius magni voluptatibus ut veniam ducimus. Ullam ab qui voluptatibus quos est in. Maiores eos ab magni tempora praesentium libero. Voluptate architecto rerum vel sapiente ducimus aut cumque quibusdam. Consequatur illo et quos vel cupiditate quis dolores at.',
                          ),
                        ],
                      ),
                    );
                  }

                  return ListTile(title: Text('Item $index'));
                },
              ),
              scrim,
              tooltip,
            ],
          );
        },
      ),
    );
  }
}

这个示例展示了如何将提示工具集成到列表视图中，并根据滚动位置动态调整其位置。