Question

我在工具提示上包装了Image.asset

Padding(
     padding: edgeInsets,
     child: Tooltip(preferBelow: false, message: "Miejsca parkingowe ogólnodostępne", child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
),

如何设置工具提示消息的文本颜色和背景颜色？

Answer 1

我认为Tooltip并没有提供更改这些行为的参数，但是

Tooltip以您的主题

final ThemeData theme = Theme.of(context);
    final ThemeData darkTheme = ThemeData(
      brightness: Brightness.dark,
      textTheme: theme.brightness == Brightness.dark ? theme.textTheme : theme.primaryTextTheme,
      platform: theme.platform,
    );

因此您可以在MaterialApp中创建主题（文本颜色有效，但backgroundColor在我的应用中不起作用，可以尝试一下）

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        backgroundColor: Colors.amber,
        primaryTextTheme: TextTheme(
          body1: TextStyle(
            color: Colors.blue,
          )
        ),
        primarySwatch: Colors.blue,
      ),
      home: ......

或

这是Tooltip代码，可以从Tooltip的源代码更改，这是一个不好的解决方案。

    return Positioned.fill(
      child: IgnorePointer(
        child: CustomSingleChildLayout(
          delegate: _TooltipPositionDelegate(
            target: target,
            verticalOffset: verticalOffset,
            preferBelow: preferBelow,
          ),
          child: FadeTransition(
            opacity: animation,
            child: Opacity(
              opacity: 0.9,
              child: ConstrainedBox(
                constraints: BoxConstraints(minHeight: height),
                child: Container(
                  decoration: BoxDecoration(
                    color: darkTheme.backgroundColor,
                    borderRadius: BorderRadius.circular(2.0),
                  ),
                  padding: padding,
                  child: Center(
                    widthFactor: 1.0,
                    heightFactor: 1.0,
                    child: Text(message, style: darkTheme.textTheme.body1),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );

Answer 2

ToolTip支持decoration命名参数，因此您无需更改顶级主题。

/// Specifies the tooltip's shape and background color.
///
/// If not specified, defaults to a rounded rectangle with a border radius of
/// 4.0, and a color derived from the [ThemeData.textTheme] if the
/// [ThemeData.brightness] is dark, and [ThemeData.primaryTextTheme] if not.
final Decoration decoration;

但是，还有其他小部件，其ToolTip方法中包括build小部件，例如IconButton，其中它们仅支持tooltip作为{{ 1}}，因此目前无法更改String

的tooltip样式

Answer 3

您可以使用textStyle属性更改tootip的颜色。带有装饰属性的工具提示的背景颜色。

    Padding(
         padding: edgeInsets,
         child: Tooltip(textStyle: TextStyle(color: Colors.white),decoration: BoxDecoration(color: Colors.red),text preferBelow: false, message: "Miejsca parkingowe ogólnodostępne", 
         child: Image.asset("assets/icons/garage.png", width: _iconSize, height: _iconSize,)),
     ),

Answer 4

您可以创建一个 TooltipThemeData 并将其设置到您的顶级 ThemeData 中。

TooltipThemeData(
  textStyle: TextStyle(
    color: Colors.white,
    fontFamily: "Questrial",
    fontWeight: FontWeight.bold,
  ),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(20),
  ),
);

Answer 5

可以通过将 TooltipTheme 设置为父小部件来设置单个图标工具提示的颜色，例如如下：

TooltipTheme(
  data: TooltipThemeData(
    textStyle: TextStyle(fontSize: 15, color: Colors.white),
    decoration: BoxDecoration(
      color: Colors.blue[300],
      borderRadius: BorderRadius.all(Radius.circular(5.0)),
    ),
  ),
  child: IconButton(
    tooltip: 'Icon Title',
    icon: Icon(Icons.analytics, color: Colors.black, size: 50),
    onPressed: () {}
  ),
)

根据documentation。

工具提示消息文本和背景颜色

5 个答案: