Flutter高级提示框插件super_tooltip_ext的使用

Flutter高级提示框插件super_tooltip_ext的使用

SuperTooltip 是从我为一位客户编写的组件演变而来。它非常灵活，允许你在屏幕的覆盖层中显示工具提示。整个屏幕会被一个通常是半透明的背景色覆盖。点击背景可以关闭工具提示。

开发者信息

• 作者：Thomas Burkhart
• 概念及版权：Marcelo Glasberg
• 许可证：MIT

工具提示必须在 StatefulWidget 中创建，并且该组件应该是工具提示显示的目标。在示例中，我们通过响应触摸事件来显示工具提示。

// 我们在首次使用时创建工具提示
tooltip = SuperTooltip(
  popupDirection: TooltipDirection.down,
  content: new Material(
      child: Text(
        "Lorem ipsum dolor sit amet, consetetur sadipscingelitr, "
        "sed diam nonumy eirmod tempor invidunt ut laboreet dolore magna aliquyam erat, "
        "sed diam voluptua. At vero eos et accusam et justoduo dolores et ea rebum. ",
    softWrap: true,
  )),
);

tooltip.show(context);

传递的 context 的中心定义了工具提示箭头的目标。 由于此小部件有许多功能，这里不会一一列举。请参阅 API 文档和源代码注释。

接下来展示一些功能。第一个示例使用了所有默认值。

让我们添加一个红色的关闭按钮，使弹出窗口向右对齐，并限制其宽度：

// 我们在首次使用时创建工具提示
tooltip = SuperTooltip(
  popupDirection: TooltipDirection.right,
  maxWidth: 200.0,
  showCloseButton: ShowCloseButton.inside,
  closeButtonColor: Colors.red,
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",
    softWrap: true,
  ),
);

让我们将气泡固定在一个位置，并将关闭按钮移到外部，同时移除阴影：

tooltip = SuperTooltip(
  popupDirection: TooltipDirection.up,
  top: 50.0,
  right: 5.0,
  left: 100.0,
  showCloseButton: ShowCloseButton.outside,
  hasShadow: false,
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ",
    softWrap: true,
  ),
      )),
);

也许你希望允许用户触摸覆盖层下方的区域而不关闭工具提示？打开目标周围的区域，这非常简单。此外，我们现在向左打开，并将箭头尖端稍微远离目标：

// 获取我们的目标中心作为相对于覆盖层坐标的全局坐标：
RenderBox renderBox = context.findRenderObject() as RenderBox;
final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
var targetGlobalCenter =
    renderBox.localToGlobal(renderBox.size.center(Offset.zero), ancestor: overlay);

tooltip = SuperTooltip(
  popupDirection: TooltipDirection.left,
  top: 150.0,      
  left: 30.0,
  arrowTipDistance: 10.0,
  showCloseButton: ShowCloseButton.inside,
  closeButtonColor: Colors.black,
  closeButtonSize: 30.0,
  hasShadow: false,
  touchThrougArea: new Rect.fromCircle(center:targetGlobalCenter, radius: 40.0),
  content: new Material(
      child: Padding(
        padding: const EdgeInsets.only(top:20.0),
        child: Text(
          "Lorem ipsum dolor sit amet, consetetursadipscing elitr, "
          "sed diam nonumy eirmod tempor invidunt utlabore et dolore magna aliquyam erat, "
          "sed diam voluptua. At vero eos et accusam etjusto duo dolores et ea rebum. ",
    softWrap: true,
  ),
);

如果你希望工具提示占据垂直方向上的最大可用空间，只需设置 snapsFarAwayVertically: true。另外，我们可以让边框变成绿色并更粗，并且触摸通过区域是一个矩形。

tooltip = SuperTooltip(
   popupDirection: TooltipDirection.left,
   arrowTipDistance: 15.0,
   arrowBaseWidth: 40.0,
   arrowLength: 40.0,
   borderColor: Colors.green,
   borderWidth: 5.0,
   snapsFarAwayVertically: true,
   showCloseButton: ShowCloseButton.inside,
   hasShadow: false,
   touchThrougArea: new Rect.fromLTWH(targetGlobalCenter.dx-100,targetGlobalCenter.dy-100, 200.0, 160.0),
   touchThroughAreaShape: ClipAreaShape.rectangle,
   content: new Material(
       child: Padding(
         padding: const EdgeInsets.only(top:20.0),
         child: Text(
           "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "
           "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyamerat, "
           "sed diam voluptua. At vero eos et accusam et justo duo dolores et earebum. ",
     softWrap: true,
   ),

完整示例Demo

以下是一个完整的示例，展示了如何使用 super_tooltip_ext 插件创建和显示工具提示。

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

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

class MyApp extends StatelessWidget {
  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  SuperTooltip? tooltip;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: ElevatedButton(
            onPressed: () {
              if (tooltip == null) {
                tooltip = SuperTooltip(
                  popupDirection: TooltipDirection.down,
                  content: Material(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        "这是一个工具提示",
                        softWrap: true,
                      ),
                    ),
                  ),
                );
              }
              tooltip?.show(context);
            },
            child: Text('显示工具提示'),
          ),
        ),
      ),
    );
  }
}