在 Flutter 中定位工具提示答案

【问题标题】：Positioning Tooltip in Flutter在 Flutter 中定位工具提示
【发布时间】：2023-02-01 11:52:44
【问题描述】：

我使用工具提示小部件，在其中我使用自定义小部件。工具提示显示在小部件下方。我怎样才能把它放在小部件的右边？

class MenuItemWithTooltip extends StatelessWidget {
  const MenuItemWithTooltip({
    required this.item,
    required this.title,
    Key? key,
  }) : super(key: key);
  final MenuItem item;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Tooltip(
      decoration: BoxDecoration(
        color: Theme.of(context).backgroundColor,
        borderRadius: const BorderRadius.all(Radius.circular(3)),
      ),
      margin: const EdgeInsets.only(left: 55),
      textStyle: text12W400.copyWith(color: Colors.white),
      child: item,
      message: title,
    );
  }
}

【问题讨论】：

我认为至少不可能没有任何技巧。调整是低于或高于垂直偏移，我打赌你已经知道了。

标签： flutter dart flutter-layout

【解决方案1】：

我遇到了同样的问题并且能够像这样解决它：工具提示默认垂直偏移为 24，我发现 -10 偏移足以抵消默认垂直偏移。您还可以在左侧添加所需大小的边距。

Tooltip(
  verticalOffset: -10,
  margin: const EdgeInsets.only(left: 75),
  message: destination.label,
  child: destination.icon,
),

【讨论】：