Question

是否可以自定义Flutter工具提示以更改颜色并增加填充/边距。默认值似乎占据了整个屏幕的宽度，并且没有命名参数可以对其进行任何进一步配置。下面的代码产生一个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

要自定义工具提示，请查看here。还是示例here。

Answer 2

对于您要引用的填充，必须使用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,
      ),
    );

四处逛逛，您可能会发现其他根据自己的喜好自定义它的方法！

自定义颤动工具提示

2 个答案: