如何限制Flutter Tooltip的最大宽度？

Question

如果工具提示信息很长，工具提示将扩展至全屏大小。如何避免这种情况并修复工具提示消息的最大宽度或将其转换为多行文本？

Tooltip(
   message: "A very, very, very, very loooooooooooooooooong text of information icon",
   child: Icon(Icons.info_outline_rounded),
)

- Aleksandr

Answer 1

您可以使用richMessage属性代替message。

                     Tooltip(
                            richMessage: WidgetSpan(
                                alignment: PlaceholderAlignment.baseline,
                                baseline: TextBaseline.alphabetic,
                                child: Container(
                                  padding: EdgeInsets.all(10),
                                  constraints:
                                      const BoxConstraints(maxWidth: 250),
                                  child: Text("Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong Message"),
                                )),
                            decoration: BoxDecoration(
                              color: Color(0XFFDFE0FF),
                              borderRadius: const BorderRadius.all(
                                  Radius.circular(4)),
                            ),
                            preferBelow: false,
                            verticalOffset: 10,
                            child: Icon(
                              Icons.info_outline,
                              size: 20,
                            ),
                          ),

- Prabhu AP

Answer 2

您可以在消息中手动添加换行符(\n)。例如:

Tooltip(
   message: "A very, very, very, very\nloooooooooooooooooong\ntext of information icon",
   child: Icon(Icons.info_outline_rounded),
)

- Martin

---

如果文本/数据来自API呢？ - undefined

不是一个可扩展的解决方案。 - undefined

Answer 3

你可以尝试使用这个，然后微调一下边距

// call from outside 
 getToolTip("A very, very, very, very loooooooooooooooooong text of information icon", GlobalKey())

// tooltip        
getToolTip(String message, GlobalKey _toolTipKey) {
  return GestureDetector(
    onTap: (){
      final dynamic _toolTip = _toolTipKey.currentState;
      _toolTip.ensureTooltipVisible();
    },
    child: Tooltip(
      key: _toolTipKey,
      waitDuration: Duration(seconds: 1),
      showDuration: Duration(seconds: 2),
      preferBelow: true,
      verticalOffset: 20,
      margin: EdgeInsets.only(right: 50), //here you change the margin 
      padding: EdgeInsets.all(5),
      height: 16,
      message: message,
      child: Icon(
        Icons.add,
      ),
    ),
  );
}

- Jahidul Islam

---

这可能会产生不必要的结果，特别是在硬编码边距时，取决于屏幕大小。 - Martin

能否使用mediaQuery宽度来改变边距与屏幕纵横比，这就是我没有写的原因？ - Jahidul Islam

这个回答似乎更适用于Web应用程序。非常感谢！ - Aleksandr