自定义颤振工具提示答案

【问题标题】：Customising flutter Tooltip自定义颤振工具提示
【发布时间】：2019-06-18 08:20:24
【问题描述】：

有没有办法自定义 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 不一定是我应该使用的小部件？

【问题讨论】：

检查 - api.flutter.dev/flutter/widgets/Overlay-class.html
@SimonH 您好，您是否完成了该工具提示 UI，对我来说，它显示了第一次安装应用程序我必须这样显示，如果我点击外部然后自动出现下一个应该出现。你能给我主意吗如何做到这一点。

标签： flutter dart tooltip flutter-layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

四处逛逛，您可能会找到其他方法来根据自己的喜好对其进行自定义！

【讨论】：