Flutter中如何将光标定位到Draggable组件的feedback组件中心？

针对可变宽度的Draggable反馈组件，要让鼠标光标始终定位在组件中心，核心是通过动态计算组件尺寸调整定位偏移，以下是具体实现方案：

• 拖拽开始时计算偏移量
  在拖拽触发的起始回调中，获取反馈组件的实际渲染尺寸，再根据当前光标位置计算出偏移值——让组件的中心坐标与光标坐标重合：

  const handleDragStart = (e) => {
    const feedbackEl = feedbackRef.current;
    if (!feedbackEl) return;
  
    const { width, height } = feedbackEl.getBoundingClientRect();
    // 计算偏移：光标位置减去组件宽高的一半
    const offsetX = e.clientX - width / 2;
    const offsetY = e.clientY - height / 2;
    setDragOffset({ x: offsetX, y: offsetY });
  };
  

• 给Feedback组件设置动态定位
  将计算好的偏移量应用到反馈组件的样式中，确保它始终以光标为中心显示：

  const CustomFeedback = ({ dragOffset }) => {
    return (
      <div
        ref={feedbackRef}
        style={{
          position: 'fixed',
          left: `${dragOffset.x}px`,
          top: `${dragOffset.y}px`,
          pointerEvents: 'none', // 防止干扰拖拽事件传递
        }}
      >
        {/* 这里是你的可变宽度文本内容 */}
        {draggedContent}
      </div>
    );
  };
  

• 关键注意事项

  • 必须使用getBoundingClientRect()获取组件实际渲染后的尺寸，不能依赖CSS预设值，否则无法适配文本长度变化带来的宽度改变
  • 确保拖拽开始时反馈组件已经完成渲染，避免获取到宽高为0的无效值
  • 如果组件包含内边距、边框，getBoundingClientRect()会自动包含这些尺寸，无需额外计算

内容的提问来源于stack exchange，提问作者BambinoUA