在 Flutter 中定位工具提示

Question

我使用工具提示小部件，在其中我使用自定义小部件。工具提示出现在小部件下方。如何通过widget将其放置在右侧？

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

Answer 1

修改

verticalOffset

和

margin

值可以做到这一点。

Tooltip(
  verticalOffset: -13,
  margin:EdgeInsets.only(left: 15),
  message: "xxx",
  child:...
)

Answer 2

至于定位

Tooltip

，只需将

preferBelow

设置为

true

或

false

并添加偏移量或填充，这将使其出现在小部件的底部或顶部。

如果您想要更多自定义，则必须在小部件上悬停时显示 OverlayEntry，然后在某种条件下或持续时间后隐藏它。比简单地使用

Tooltip

要麻烦得多。但可以根据您的需要调整对齐方式。

一些需要研究的软件包，可以简化覆盖的使用：

https://pub.dev/packages/modals

https://pub.dev/packages/flutter_portal