1

我正在努力弄清楚如何将一个小部件 相对于屏幕上的另一个 居中OverlayEntry（在一个内部 ）。OverlayWidget

以下是我到目前为止的代码的简化版本（假设它是 a StatefulWidget ）：

class _MyIconState extends State<MyIcon> {
 
 // Here I get the RenderBox for the MyIcon widget and its size and coordinates
 late final renderedWidget = context.findRenderObject() as RenderBox;
 late final renderedOffset = renderedWidget.localToGlobal(Offset.zero);
 late final renderedSize = renderedWidget.size;

 // This is the OverlayEntry with the Text() Widget I'd love to center below MyIcon
 late final entry = OverlayEntry(
   builder: (context) => Positioned(
     top: renderedOffset.dy + renderedSize.height,
     left: renderedOffset.dx + (renderedSize.width / 2),
     child: Text(
         widget.message ?? 'Test',
         textAlign: TextAlign.center,
       ),
     ),
   ),
 );

 @override
 Widget build(BuildContext context) {
   return widget.action != null
       ? GestureDetector(
           behavior: HitTestBehavior.opaque,
           onTap: () {
             if (widget.action != null) {
               widget.action!();
               _showTooltip();
             } else {
               _showTooltip();
             }
           },
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 10),
             child: Icon(widget.icon),
           ),
         )
       : Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10),
           child: Icon(widget.icon),
         );
 }

 _showTooltip() {
   // The screen overlay
   final overlay = Overlay.of(context)!;
   overlay.insert(entry);  
 }
}

本质上，当点击图标本身时，创建并在下方放置Overlay一个工具提示Text（作为一个）。OverlayEntryMyIcon

问题是这行代码：renderedOffset.dx + (renderedSize.width / 2).

MyIcon我可以将工具提示中的文本从Text.

为了使其居中，我需要像这样定位它：renderedOffset.dx + (renderedSize.width / 2) - (renderedTextWidth/2)，但是它Text是动态的，我看不出有什么办法知道和解释它的宽度（在示例中，renderedTextWidth）。

我知道TooltipFlutter 中已经有一个很好的小部件可以简化我的生活。不幸的是，一些要求（独立于手头的问题）不允许我使用它。所以我必须想出一些定制的东西。

这大约是我最终的结果： 我希望红线或多或少垂直对齐

大家有没有遇到过这样的问题，或者对类似的事情有一些经验？您对如何处理/解决问题有任何提示吗？

感谢您的任何帮助。

4

0 回答 0