自定义颤振工具提示

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,
        )

我至少尝试将它从屏幕边缘填充并以更紧凑的方式显示它。显然，包装TooltipinPadding只会影响子小部件 (the IconButton) 而不是它Tooltip本身的定位。

理想情况下，我希望显示与以下格式类似的工具提示。非常理想的是，我希望通过单击而不是长按来显示它。我猜Tooltip不一定是我应该使用的小部件？

Answer 1

For the padding that you are referring to, you will have to use the margin parameter. The padding is for the internal space and margin is for outside.

For the background color, use the decoration parameter and for text, use textStyle.

Here's an example:

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,
)

As for the single tap, you will have to make an iteration of this widget for yourself. The easiest way would be to view the source code, copy it over to your project, change the direct references from import colors.dart'; to import 'package:flutter/src/material/colors.dart'; and then make the necessary change you want.

For single tap, search for GestureDetector and add the same value from onLongPress to onTap:

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

Poke around and you might find other ways to customize it to your liking!

Answer 2

要自定义您的工具提示，您可以查看此处。或者它的例子here。