dart 自定义Flutter工具提示

fumotvh3  于 12个月前  发布在  Flutter
关注(0)|答案(3)|浏览(154)

有没有一种方法可以自定义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,
        )

字符串
x1c 0d1x的数据
我至少尝试将它从屏幕边缘移开,以更紧凑的方式显示它。显然,将Tooltip Package 在Padding中只会影响子部件(IconButton)的位置,而不是Tooltip本身。
理想情况下,我希望显示一个工具提示的东西与下面的一个类似的格式。和超理想情况下,我想它是显示与一个单一的点击,而不是长按。我猜Tooltip不一定是我应该使用的小部件?


koaltpgm

koaltpgm1#

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


四处看看,你可能会发现其他方法来定制它,以您的喜好!

e37o9pze

e37o9pze2#

要自定义工具提示,你可以看看here。或者它的例子here


的数据

wpx232ag

wpx232ag3#

你应该使用richMessage而不是message,你可以用不同的东西来定制它。你可以在这里插入一个小部件,这样你就可以随心所欲地定制它。这里是一个基本的例子:

Tooltip(
      padding: const EdgeInsets.all(Spacing.xlarge),
      decoration: const BoxDecoration(color: Color(0xffE7E5FB)),
      richMessage: WidgetSpan(
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: Container(
          padding: const EdgeInsets.all(10),
          constraints: const BoxConstraints(maxWidth: 300),
          child: Text(
            'The description of the tooltip',
          ),
        ),
      ),
      child: Icon(Icons.info),
    );

字符串

相关问题