Flutter提示信息展示插件cs_tooltip的使用

Flutter提示信息展示插件cs_tooltip的使用

cs_tooltip 是一个灵活的提示信息展示插件，它允许你在屏幕的叠加层上显示提示信息。与Flutter标准的Tooltip相比，它提供了更多的灵活性。你可以选择用背景色覆盖整个屏幕，并且点击背景可以关闭提示信息。

安装

运行以下命令：

flutter pub add cs_tooltip

这将会在你的包的pubspec.yaml文件中添加如下依赖项（并隐式地运行flutter pub get）：

dependencies:
  cs_tooltip: latest

现在你可以在Dart代码中使用它了：

import 'package:cs_tooltip/cs_tooltip.dart';

开始使用

你需要将你的Widget设置为StatefulWidget，并且创建一个控制器来管理提示信息的状态。可以通过定义一个SuperTooltipController实例并传递给构造函数来实现这一点。

final _controller = SuperTooltipController();

child: SuperTooltip(
  _controller: tooltipController,
  // ...
)

void makeTooltip() {
  _controller.showTooltip();
}

你需要将SuperTooltip包裹在一个GestureDetector、MouseRegion或InkWell中，这些组件负责显示和隐藏内容。进一步处理提示信息的状态可以通过控制器显式管理。

child: GestureDetector(
  onTap: () async {
    await _controller.showTooltip();
  },
  child: SuperTooltip(
    showBarrier: true,
    controller: _controller,
    content: const Text(
      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,",
      softWrap: true,
      style: TextStyle(
        color: Colors.white,
      ),
    ),
    child: Container(
      width: 40.0,
      height: 40.0,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blue,
      ),
      child: Icon(
        Icons.add,
        color: Colors.white,
      ),
    ),
  ),
),

SuperTooltip只需要一个必需参数，即内容。你可以传递一个子Widget，比如一个图标，表示应该点击什么。如下所示：

SuperTooltip(
  content: const Text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr",
    softWrap: true,
    style: TextStyle(
      color: Colors.white,
    ),
  ),
  child: Container(
    width: 40.0,
    height: 40.0,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
    ),
    child: Icon(
      Icons.add,
      color: Colors.white,
    ),
  ),
),

通过传递backgroundColor属性，可以改变背景颜色。

SuperTooltip(
  backgroundColor: Color(0xff2f2d2f),
  //....
),

通过传递popupDirection属性，可以改变弹出方向到TooltipDirection.right、TooltipDirection.left、TooltipDirection.bottom 和 TooltipDirection.up。

SuperTooltip(
  popupDirection: TooltipDirection.right,
  //... 
)

屏幕阻挡

如果你想阻止用户通过点击背景来关闭提示信息，可以将showBarrier设置为true，这意味着点击遮罩区域不会立即隐藏提示信息。

SuperTooltip(
  showBarrier: true,
  barrierColor: Colors.red,
  //...
)

模糊效果

如果你想在弹出窗口后面显示模糊效果，可以通过将showDropBoxFilter 设置为true 来实现，必须同时启用showBarrier 并设置sigmaX 和 sigmaY。

SuperTooltip(
  showBarrier: true,
  showDropBoxFilter: true,
  sigmaX: 10, 
  sigmaY: 10,
  //...
)

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

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

为了在用户按下返回按钮时隐藏提示信息，你可以将GestureDetector组件包装在WillPopScope组件中，并传递一个回调函数给onWillPop。

return WillPopScope(
  onWillPop: _willPopCallback,
  child: GestureDetector(
    onTap: () async {
      await _controller.showTooltip();
    },
    // ..
  ),
);

创建一个回调函数以关闭提示信息：

Future<bool> _willPopCallback() async {
  // 如果提示信息打开，我们不会在回退按钮按下时退出页面，而是关闭提示信息
  if (_controller.isVisible) {
    await _controller.hideTooltip();
    return false;
  }
  return true;
}

示例应用

查看完整的示例应用 在这里。

示例代码

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

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Tooltip Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatefulWidget {
  const ExamplePage({
    Key? key,
  }) : super(key: key);

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

class _ExamplePageState extends State<ExamplePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: TargetWidget(),
      ),
    );
  }
}

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

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

class _TargetWidgetState extends State<TargetWidget> {
  final _controller = SuperTooltipController();
  
  Future<bool> _willPopCallback(bool flag) async {
    // 如果提示信息打开，我们不会在回退按钮按下时退出页面，而是关闭提示信息
    if (_controller.isVisible) {
      await _controller.hideTooltip();
      return false;
    }
    return true;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PopScope(
      onPopInvoked: _willPopCallback,
      child: SuperTooltip(
        showOnClick: false,
        showBarrier: true,
        controller: _controller,
        popupDirection: TooltipDirection.down,
        backgroundColor: Color(0xff2f2d2f),
        left: 30,
        right: 30,
        arrowTipDistance: 15.0,
        arrowBaseWidth: 20.0,
        arrowLength: 20.0,
        borderWidth: 2.0,
        constraints: const BoxConstraints(
          minHeight: 0.0,
          maxHeight: 100,
          minWidth: 0.0,
          maxWidth: 100,
        ),
        showCloseButton: ShowCloseButton.none,
        touchThroughAreaShape: ClipAreaShape.rectangle,
        touchThroughAreaCornerRadius: 30,
        barrierColor: Color.fromARGB(26, 47, 45, 47),
        content: const 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,
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        child: GestureDetector(
          child: Container(
            width: 40.0,
            height: 40.0,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
          ),
          onTap: makeTooltip,
        ),
      ),
    );
  }

  void makeTooltip() {
    _controller.showTooltip();
  }
}