带有工具提示的 Flutter Tab

Question

我正在制作一个 Flutter 网络应用程序。

我有很多选项卡，如果其中的文本太多，可能会被遮挡，所以我想要一个工具提示，当用户将鼠标悬停在它上面时，他们总能看到完整的文本。

我现有的用于构建选项卡列表的工作代码是这样的：

for (var i = 0; i < options.length; i++) {
   String tabTitle = option[i].text;
   tabs.add( Tab(text: tabTitle) );
}

我想做这样的事情:

for (var i = 0; i < options.length; i++) {
   String tabTitle = option[i].text;
   tabs.add( 
        Tooltip( 
          message: tabTitle, 
          child: Tab(text: tabTitle), 
        ),
      );
}

但上面写着“参数类型 'Tooltip' 无法分配给参数类型 'Tab'。”

有什么方法可以在 TabBar 中的各个选项卡上显示工具提示吗？

Answer 1

我相信您已将 tabs 声明为 List<Tab>，然后只需将其更改为 List<Widget> 即可，

tabs: [
        Tooltip(message: 'message', child: Tab(text: 'test'),),
        Tab(text: 'Test1'),
        Tab(text: 'Test2')
   ]

你的情况

final tabs = <Widget>[];

然后只需添加标签即可。

for (var i = 0; i < options.length; i++) {
   String tabTitle = option[i].text;
   tabs.add( 
        Tooltip( 
          message: tabTitle, 
          child: Tab(text: tabTitle), 
        ),
      );
}

带有工具提示的 Flutter Tab

Flutter Tab with Tooltip

flutter

tabs

tooltip

有什么方法可以在 TabBar 中的各个选项卡上显示工具提示吗？