一統天下 flutter - widget 文本類: Tooltip - 長按提示或鼠標懸浮提示

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd

一統天下 flutter - widget 文本類: Tooltip - 長按提示或鼠標懸浮提示

示例如下:

lib\widget\text\tooltip.dart

/*
 * Tooltip - 長按提示或鼠標懸浮提示
 *
 * 注：Tooltip 的觸發方式默認是長按或鼠標懸浮，也可以通過 triggerMode 改爲單擊觸發或手動觸發
 */

import 'package:flutter/material.dart';
import 'package:flutter_demo/helper.dart';

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

  @override
  _TooltipDemoState createState() => _TooltipDemoState();
}

class _TooltipDemoState extends State<TooltipDemo> {

  @override
  Widget build(BuildContext context) {
    /// 用於定義 Tooltip 的 key
    final tooltipKey = GlobalKey<TooltipState>();

    return Scaffold(
      appBar: AppBar(title: const Text("title"),),
      backgroundColor: Colors.orange,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            /// 在 child 上長按或鼠標懸浮，則顯示 message 提示
            const Tooltip(
              message: 'Tooltip message',
              child: MyText('Tooltip child'),
            ),

            Tooltip(
              message: 'Tooltip message',
              child: const MyText('Tooltip child'),
              /// 提示框的文本樣式
              textStyle: const TextStyle(
                fontSize: 24,
              ),
              /// 提示框的裝飾樣式
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                gradient: const LinearGradient(colors: <Color>[Colors.red, Colors.green]),
              ),
              /// 提示框的高
              height: 100,
              /// 提示框的內邊距
              padding: const EdgeInsets.all(20),
              /// 提示框的位置是否在下面
              preferBelow: true,
              /// 提示框的垂直方向的偏移距離
              verticalOffset: 0,
              /// 長按或鼠標懸浮超過此值指定的時間後，則顯示提示框
              waitDuration: const Duration(seconds: 1),
              /// 提示框顯示的時長
              showDuration: const Duration(seconds: 2),
            ),

            Tooltip(
              /// 提示框的內容支持富文本的方式，即通過 TextSpan 設置提示框的內容
              richMessage: const TextSpan(
                text: 'abc',
                style: TextStyle(color: Colors.white),
                children: [
                  TextSpan(
                    text: 'xyz',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
              child: const MyText('Tooltip child'),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: Colors.blue,
              ),
            ),

            Tooltip(
              message: 'Tooltip message',
              child: const MyText('Tooltip child'),
              showDuration: const Duration(seconds: 3),

              /// 定義 Tooltip 的 key
              key: tooltipKey,
              /// Tooltip 的觸發模式
              ///   longPress - 長按或鼠標懸浮
              ///   tap - 單擊
              ///   manual - 手動
              triggerMode: TooltipTriggerMode.manual,
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          /// 手動觸發 Tooltip
          tooltipKey.currentState?.ensureTooltipVisible();
        },
        label: const Text('show tooltip'),
      ),
    );
  }
}

源碼 https://github.com/webabcd/flutter_demo
作者 webabcd