Flutter Markdown文本提示插件 markdown_tooltip 的使用

Markdown Tooltips

MarkdownTooltip 是一个支持 Markdown 格式并带有延迟弹出的 Tooltip 小部件。

该插件通过 Flutter 仓库 发布。

功能特性

• Markdown 支持：在 Tooltip 中使用 Markdown 格式，使提示信息更加丰富和灵活。
• 默认延迟弹出：避免即时弹出的 Tooltip 造成界面混乱，默认设置有一定的延迟时间。
• 用户引导：为应用程序提供更好的自我文档化功能，帮助用户无需查阅手册即可理解应用的功能。

快速开始

要将 markdown_tooltip 添加到您的项目中，请运行以下命令：

dart pub add markdown_tooltip

更新后的 pubspec.yaml 文件应包含如下内容：

dependencies:
  ...
  markdown_tooltip: ^0.0.2

使用方法

MarkdownTooltip 小部件可以包裹任何您希望为其添加更灵活 Tooltip 的小部件。下面是一个将 Icon 包裹在 MarkdownTooltip 中的例子：

ElevatedButton(
    onPressed: () {},
    child: const MarkdownTooltip(
        message: '''

        **Save** Tap here to save our future. Visit *the internet* for details.

        ''',
        child: Icon(Icons.save),
    ),
)

完整示例代码

以下是一个完整的示例，展示了如何使用 MarkdownTooltip 创建带 Markdown 格式的 Tooltip：

// A minimal example to illustrate MarkdownTooltip
//
// Run it with:
//
// cd example
// flutter create .
// flutter run

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

/// Flutter code sample for [MarkdownTooltip].
void main() => runApp(const MarkdownTooltipExampleApp());

/// Demonstrator class
class MarkdownTooltipExampleApp extends StatelessWidget {
  /// Initialise.
  const MarkdownTooltipExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('MarkdownTooltip Sample')),
        body: const Padding(
          padding: EdgeInsets.all(20.0),
          child: MarkdownTooltipSample(),
        ),
      ),
    );
  }
}

/// Define the MarkdownTooltip to use.
class MarkdownTooltipSample extends StatelessWidget {
  /// Initialise.
  const MarkdownTooltipSample({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        MarkdownTooltip(
          message: '''

      # Markdown Tooltip

      I am a **markdown** tooltip. Notice the **bold** and *italic* text.

      Tooltips should normally be short and are just reminders. But we can
      slightly extend the tooltips to guide the user in their navigation and
      use of the app.

      + Bullets are okay.

      + But they need to be separated by empty lines.

      > This line begins with a greater than (>)

      Here's some code:

      ```
      flutter run --release
      ```

      An ***ordered list*** example.

      1. First example

      2. Second example

      ---

      Experiment and enjoy. Give your users a slightly better experience.

      ---

      ''',
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('Hover here for a tooltip with a link.'),
          ),
        ),
        MarkdownTooltip(
          message: '''

      # Markdown Tooltip with a Link

      This tooltip includes a **link**. Links are included in **markdown** like:

      ```
      [link](https://example.com)
      ```

      Normally a tooltip will *disappear if you tap inside the tooltip*.

      With an embedded link this gets tricky. So when a tool tip includes an
      embedded markdown link, *the tooltip no longer disappears on a tap*.

      Instead, if you tap the link then a browser will display the target of the
      link. This is an [example of a link](https://togaware.com).

      ---

      ''',
          child: ElevatedButton(
            onPressed: () {},
            child: const Text('Hover here to show a tooltip.'),
          ),
        ),
      ],
    );
  }
}

其他信息

• 默认延迟：为了防止 Tooltip 过于频繁地弹出，导致界面混乱，MarkdownTooltip 默认设置了延迟弹出时间。
• 贡献与问题反馈：您可以访问 GitHub 仓库 提交问题或贡献代码。
• 当前限制：目前不支持文本选择和 URL 链接，欢迎贡献者完善这些功能。

示例截图

以下是使用 MarkdownTooltip 的简单示例截图：

在 Rattle 应用中，MarkdownTooltip 被用于突出显示允许加载的文件类型：

希望这个指南能帮助您更好地理解和使用 markdown_tooltip 插件！如果有任何问题或需要进一步的帮助，请随时联系开发者社区。