Flutter自定义可调整大小容器拖拽单侧时对边同步移动如何解决？

问题根因 #

你当前的可调整容器默认被Center组件包裹，Flutter的居中布局会自动让容器始终保持在父组件中心，当你修改容器宽高时，框架会自动调整容器位置维持居中，就出现了「拖拽单侧时对边同步移动」的现象，并非拖拽逻辑本身错误。

修复方案 #

1. 调整状态存储规则 #

不要把宽高等可变状态放在StatefulWidget的非final属性中，将宽高、容器左上角偏移量都存入State类统一管理：

class _ResizeableContainerState extends State<ResizeableContainer> {
  late double offsetX;
  late double offsetY;
  late double currentWidth;
  late double currentHeight;

  @override
  void initState() {
    super.initState();
    currentWidth = widget.currentWidth;
    currentHeight = widget.currentHeight;
    // 初始偏移可根据需求自定义，这里默认设为0
    offsetX = 0;
    offsetY = 0;
  }

2. 修正拖拽逻辑 #

拖拽左侧、顶部时同步调整容器偏移量，保证对边位置固定：

void onHorizontalDragLeft(DragUpdateDetails details) {
    setState(() {
      final newWidth = currentWidth - details.delta.dx;
      if (newWidth >= 4) {
        currentWidth = newWidth;
        offsetX += details.delta.dx;
      }
    });
  }

  void onHorizontalDragRight(DragUpdateDetails details) {
    setState(() {
      final newWidth = currentWidth + details.delta.dx;
      if (newWidth >=4) {
        currentWidth = newWidth;
      }
    });
  }

  void onVerticalDragUp(DragUpdateDetails details) {
    setState(() {
      final newHeight = currentHeight - details.delta.dy;
      if (newHeight >=4) {
        currentHeight = newHeight;
        offsetY += details.delta.dy;
      }
    });
  }

  void onVerticalDragDown(DragUpdateDetails details) {
    setState(() {
      final newHeight = currentHeight + details.delta.dy;
      if (newHeight >=4) {
        currentHeight = newHeight;
      }
    });
  }

3. 新增偏移控制层 #

外层用Transform.translate控制容器位置，替换原直接返回SizedBox的逻辑：

@override
  Widget build(BuildContext context) {
    return Transform.translate(
      offset: Offset(offsetX, offsetY),
      child: SizedBox(
        width: currentWidth.clamp(4, 800),
        height: currentHeight.clamp(4, 800),
        child: Stack(
          children: [
            widget.child,
            _DragReferences(
              length: currentWidth,
              side: ReferenceSide.top,
              onDragCallBack: onVerticalDragUp,
            ),
            _DragReferences(
              length: currentWidth,
              side: ReferenceSide.bottom,
              onDragCallBack: onVerticalDragDown,
            ),
            _DragReferences(
              length: currentHeight,
              side: ReferenceSide.left,
              onDragCallBack: onHorizontalDragLeft,
            ),
            _DragReferences(
              length: currentHeight,
              side: ReferenceSide.right,
              onDragCallBack: onHorizontalDragRight,
            )
          ],
        ),
      ),
    );
  }
}

额外优化点 #

你原有代码中widget.currentHeight > 0 ? widget.currentHeight : 0;属于无赋值的无效代码，本次修改已经通过newWidth >=4的判断替代，避免容器缩为0尺寸。

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