如何控制颤振工具提示的最大宽度？答案

【问题标题】：How to constain maxWidth of flutter Tooltip?如何控制颤振工具提示的最大宽度？
【发布时间】：2022-11-08 19:06:15
【问题描述】：

如果工具提示消息很长，则工具提示会在全屏尺寸上展开。如何避免它并修复工具提示消息的最大宽度或将其转换为多行文本？

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

【问题讨论】：

标签： flutter dart

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你可以试试这个，只需调整边距

// 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,
      ),
    ),
  );
}

【讨论】：

这可能会根据屏幕尺寸产生不需要的结果，尤其是在对边距进行硬编码时。
是否可以使用 mediaQuery 宽度更改屏幕纵横比的边距，这就是我没有写的原因？
这个答案似乎对网络应用程序更敏感。非常感谢！

【解决方案3】：

您可以使用richMessage 属性代替消息。

                     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,
                            ),
                          ),

【讨论】：