Flutter tootip 轻量级提示

最外层必须是MaterialApp。

其中triggerMode比较特殊。

TooltipTriggerMode.longPress 长按弹出。
TooltipTriggerMode.tap 单击弹出。
TooltipTriggerMode.manual 手动弹出

scala 复制代码

class _PageState extends State<Page> {
  late final TooltipController _controller = TooltipController();
  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: "手动弹出的提示",
      triggerMode: TooltipTriggerMode.manual,
      controller: _controller,
      child: ElevatedButton(
        onPressed: (){
          _controller.show(); // 代码主动唤起tooltip
        },
        child: const Text("手动触发"),
      ),
    );
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

dart 复制代码

Tooltip({
  required String message, // 提示文字【必填】
  required Widget child,   // 被包裹的目标组件
  // 可选参数
  double? height,          // 提示框最小高度
  EdgeInsetsGeometry? padding, // 内部内边距
  EdgeInsetsGeometry? margin,  // 提示框和屏幕边距
  TextStyle? textStyle,    // 提示文字样式
  Decoration? decoration,  // 提示框背景装饰
  bool preferBelow = true, // true 默认显示在child下方；false 在上方
  double verticalOffset = 24.0, // 提示框距离child垂直偏移
  Duration waitDuration = const Duration(milliseconds: 1500), // 长按等待多久弹出（移动端默认1.5s）
  Duration showDuration = const Duration(seconds: 1), // 弹出后显示多久自动消失
  TooltipTriggerMode triggerMode = TooltipTriggerMode.longPress, // 触发方式
})

scala 复制代码

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: HomePage()));
}

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blue,
        child: Center(
          child: Tooltip(
            message: "别点我，我生气了呀",
            triggerMode: TooltipTriggerMode.tap,
            child: Image.network(
              "https://img14.360buyimg.com/pop/jfs/t1/65536/18/25365/187701/66b48584F7e4e95b8/283d6ab2b046244f.png?x-oss-process=image%2Fformat%2Cjpg%2Fresize%2Cw_500%2Fquality%2Cq_80",
            ),
          ),
        ),
      ),
    );
  }
}

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

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

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Container(child: null, color: Colors.red));
  }
}