flutter 如何制作一个包含信息、图像和图标的工具提示?

8mmmxcuj  于 2023-06-07  发布在  Flutter
关注(0)|答案(2)|浏览(172)

我正试图使一个桌面应用程序,其中有一个游戏中的字符,我需要当鼠标悬停在它的位置,它的信息框显示的字符。
我尝试了工具提示小部件,但它只适用于文本,它不是我需要的,我需要能够显示图像,图标等,简而言之,我想要的小部件。
类似于这张照片的东西。
Tooltip width image and icons
我的意思可能是这样的代码:

Widget build(BuildContext context) {
    return Center(
      child: Tooltip(
        message: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Colors.grey,
          ),
          child: Column(
            children: [
              const SizedBox(height: 10),
              Text(
                'This is a tooltip',
                style: TextStyle(
                  fontSize: 14,
                ),
              ),
              const SizedBox(height: 10),
              Icon(Icons.thumb_up_alt),
            ],
          )
        ),
        child: Image.asset(
          'assets/image.png',
          height: 300,
          width: 300,
        ),
      ),
    );
  }

这是一个不起作用的代码示例,但它对理解我需要什么很有用。
PS:我不知道如何使图像显示像一些人在其他问题,对不起的不便。

ibps3vxo

ibps3vxo1#

我也想做同样的事。这个 Package 看起来很不错。两年前,它出现了,看起来仍然保持着:https://pub.dev/packages/super_tooltip

emeijp43

emeijp432#

工具提示是Flutter中基于材质设计的内置小部件,当用户长按和/或悬停在小部件上时,它会在浮动标签中显示小部件的文本描述。

Widget build(BuildContext context) {
return Center(
  child: Tooltip(
    message: 'this is image',
    child: Image.asset(
      'assets/Bella.png',
      height: 300,
      width: 300,
    ),
  ),
);

}

相关问题