自定义flutter Tooltip

Question

有没有一种方法可以自定义Flutter工具提示来改变颜色和增加paddingmargins。默认情况下似乎填满了整个屏幕的宽度，而且没有命名参数来进一步配置。下面的代码产生了一个 Tooltip 如截图所示。

Tooltip(child:  IconButton(icon: Icon(Icons.info, size: 30.0)),
        message: 'Lorem ipsum dolor sit amet, consectetur '
                 'adipiscing elit, sed do eiusmod tempor incididunt '
                 'ut labore et dolore magna aliqua. '
                 'Ut enim ad minim veniam, quis nostrud exercitation '
                 'ullamco laboris nisi ut aliquip ex ea commodo consequat',
        padding: EdgeInsets.all(20),
        preferBelow: true,
        verticalOffset: 20,
        )

我最起码想把它垫离屏幕边缘，以更紧凑的方式显示。显然，将 Tooltip 在 Padding 只会影响子部件的定位（该部件的 IconButton)而不是 Tooltip 本身。

理想的情况是，我希望显示一个类似下面这个格式的工具提示。而且超级理想的是，我希望它能通过一次点击而不是长按来显示。我猜想 Tooltip 是不是一定是我应该使用的小部件？

Answer 1

对于你所提到的padding，你将不得不使用以下参数 margin 参数。padding为内部空间，margin为外部空间。

对于背景颜色，使用 decoration 参数，对于文本，使用 textStyle.

这是一个例子。

Tooltip(
  child: IconButton(icon: Icon(Icons.info, size: 30.0)),
  message: 'Lorem ipsum dolor sit amet, consectetur '
           'adipiscing elit, sed do eiusmod tempor incididunt '
           'ut labore et dolore magna aliqua. '
           'Ut enim ad minim veniam, quis nostrud exercitation '
           'ullamco laboris nisi ut aliquip ex ea commodo consequat',
  padding: EdgeInsets.all(20),
  margin: EdgeInsets.all(20),
  showDuration: Duration(seconds: 10),
  decoration: BoxDecoration(
    color: Colors.blue.withOpacity(0.9),
    borderRadius: const BorderRadius.all(Radius.circular(4)),
  ),
  textStyle: TextStyle(color: Colors.white),
  preferBelow: true,
  verticalOffset: 20,
)

至于单点，你必须自己制作一个迭代的小部件。最简单的方法是查看源代码，将其复制到你的项目中，将直接引用的内容从 import colors.dart'; 到 import 'package:flutter/src/material/colors.dart'; 然后做出你想要的必要改变。

对于单点，搜索 GestureDetector 再加上同样的数值 onLongPress 到 onTap:

    Widget result = GestureDetector(
      behavior: HitTestBehavior.opaque,
      onLongPress: _handleLongPress,
      onTap: _handleLongPress,
      excludeFromSemantics: true,
      child: Semantics(
        label: excludeFromSemantics ? null : widget.message,
        child: widget.child,
      ),
    );

戳一戳，你可能会发现其他的方法来定制它，以满足你的喜好。

Answer 2

要自定义你的工具提示，你可以看一下。此处. 或者它的例子 此处.