Flutter中pointerDragAnchorStrategy无法使feedback图标精准跟随光标问题

你遇到的情况是：明明用了pointerDragAnchorStrategy甚至手动写了偏移逻辑，Draggable的feedback还是没法精准跟着光标走，尤其第二个Draggable在屏幕下方时问题更明显。

问题根源 #

1. 你的布局里，SizedBox(height:700)把第二个Draggable推到了屏幕可视区域外，拖动不在可视区的组件时，Flutter的坐标计算会出现偏差，导致锚点策略失效。
2. 默认的Icon组件有自身尺寸，哪怕锚点正确，视觉上也会觉得没贴合光标（比如Icon的左上角对齐光标，但你想要的是中心对齐）。

分步解决 #

1. 先让Draggable回到可视区

把那个占700高度的SizedBox换掉，用合理的布局让组件都在屏幕里：

import 'package:flutter/material.dart';

class DragTest extends StatelessWidget {
  const DragTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: const <Widget>[
            Draggable(
              dragAnchorStrategy: pointerDragAnchorStrategy,
              feedback: Icon(Icons.circle, size: 24),
              child: Text('DRAG ME'),
            ),
            Draggable(
              dragAnchorStrategy: pointerDragAnchorStrategy,
              feedback: Icon(Icons.circle, size: 24),
              child: Text('DRAG ME 2'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 让Feedback完全贴住光标

如果要让Icon的中心精准对齐光标，给feedback加个偏移抵消自身尺寸：

feedback: Transform.translate(
  offset: const Offset(-12, -12), // 24px的Icon，偏移一半让中心对准光标
  child: Icon(Icons.circle, size: 24),
),

嫌Icon麻烦的话，直接用个小方块当feedback，视觉上更直观：

feedback: const SizedBox(
  width: 8,
  height: 8,
  child: DecoratedBox(
    decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
  ),
),

3. 滚动布局里的处理（如果需要）

要是你的实际场景用了ListView这类滚动容器，别担心，只要保持pointerDragAnchorStrategy，再配合上面的偏移处理就行，坐标计算会自动适配滚动位置：

ListView(
  padding: const EdgeInsets.all(20),
  children: [
    Draggable(
      dragAnchorStrategy: pointerDragAnchorStrategy,
      feedback: Transform.translate(
        offset: const Offset(-12, -12),
        child: Icon(Icons.circle),
      ),
      child: const Text('DRAG ME'),
    ),
    const SizedBox(height: 20),
    Draggable(
      dragAnchorStrategy: pointerDragAnchorStrategy,
      feedback: Transform.translate(
        offset: const Offset(-12, -12),
        child: Icon(Icons.circle),
      ),
      child: const Text('DRAG ME 2'),
    ),
  ],
)

效果验证 #

调整后再拖动，不管是哪个位置的Draggable，feedback都会精准跟着光标移动，完全符合你的需求。

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