Flutter 之 Tooltip （六十二）

Tooltip 是一个提示控件，用 Tooltip 包裹的控件，长按可以弹出 Tooltip 提示的 message

1. Tooltip

Tooltip 定义

  const Tooltip({
    Key? key,
    this.message,
    this.richMessage,
    this.height,
    this.padding,
    this.margin,
    this.verticalOffset,
    this.preferBelow,
    this.excludeFromSemantics,
    this.decoration,
    this.textStyle,
    this.waitDuration,
    this.showDuration,
    this.child,
    this.triggerMode,
    this.enableFeedback,
  }) 

Tooltip 属性	介绍
message	提示语 普通文本
richMessage	提示语 富文本
height	不设置 child 时，Tooltip 的固有高度
padding	ToolTip 内边距
margin	ToolTip 外边距
verticalOffset	距离 child 中心点的竖直方向偏移量
preferBelow	设置为 false 时，会展示在 child 上方
excludeFromSemantics	是否使用语义标签
decoration	装饰
textStyle	字体样式，TextStyle
waitDuration	指针悬停多久后展示 Tooltip ，默认为 0
showDuration	展示时长，之后消失
child	子控件
triggerMode	显示Tooltip的模式 默认长按显示
enableFeedback	是否给予声音触觉反馈。为空时，默认为true。 当启用反馈时，长按会产生短振动。

2. 示例

示例1

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Tooltip(
          message: "Tooltip 是一个提示控件，用 Tooltip 包裹的控件，长按可以弹出 Tooltip 提示的 message",
          height: 60, // Tooltip 高度
          padding: EdgeInsets.all(8), // Tooltip 内边距
          margin: EdgeInsets.all(12), // Tooltip 外边距
          verticalOffset: 20, // 距离 child 中心点的竖直方向偏移量
          preferBelow: false, // 设置为 false 时，会展示在 child 上方
          enableFeedback: true, // 是否给予反馈
          decoration: BoxDecoration(
              color: Colors.amber, // 装饰颜色
              border: Border.all(width: 2.0, color: Colors.green[200]!), // 边框
              borderRadius: BorderRadius.circular(8)),//边框角
          textStyle: TextStyle(fontSize: 20),
          waitDuration: Duration(milliseconds: 200), // 指针悬停多久后展示 Tooltip
          showDuration: Duration(seconds: 2), // 展示时长，之后消失
          child: Text("normal Tooltip"),
        ),
      ),
    );
  }
}

89.gif

示例2

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Tooltip(
          richMessage: WidgetSpan(
              child: Image.asset(
            "assets/images/4.jpeg",
            height: 200,
          )),
          height: 200,
          padding: EdgeInsets.zero, // 内边距
          triggerMode: TooltipTriggerMode.tap, // 单击 显示Tooltip
          child: Text("Image Tooltip"),
        ),
      ),
    );
  }
}

90.gif

参考：https://www.jianshu.com/p/f5e64000c960