Flutter实现Image Container移动时不超出固定Frame Container边界的问题

要实现拖拽Image Container时，当它与固定的Frame Container边界重合（或重叠）时禁止向该方向继续移动，我们需要在拖拽过程中实时计算两个容器的位置关系，限制Image Container的移动范围，避免与Frame Container发生重叠。核心步骤如下：

1. 定义Frame Container的固定位置和尺寸常量，方便后续计算。
2. 在onPanUpdate回调中，计算Image Container移动后的新位置。
3. 分别检查X轴和Y轴方向的移动是否会导致与Frame Container重叠，若会则将位置限制在边界处。

以下是修改后的完整代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CropImagePage(),
    );
  }
}

class CropImagePage extends StatefulWidget {
  @override
  _CropImagePageState createState() => _CropImagePageState();
}

class _CropImagePageState extends State<CropImagePage> {
  Offset _position = Offset.zero;
  
  // Frame Container的固定参数
  final double _frameLeft = 50;
  final double _frameTop = 50;
  final double _frameWidth = 100;
  final double _frameHeight = 100;
  
  // Image Container的尺寸
  final double _imageWidth = 300;
  final double _imageHeight = 300;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Crop Image'),
      ),
      body: Center(
        child: Stack(
          children: [
            Positioned(
              left: _position.dx,
              top: _position.dy,
              child: GestureDetector(
                onPanUpdate: (details) {
                  double newDx = _position.dx + details.delta.dx;
                  double newDy = _position.dy + details.delta.dy;

                  // 计算Frame的右边界和下边界
                  double frameRight = _frameLeft + _frameWidth;
                  double frameBottom = _frameTop + _frameHeight;

                  // ---------------------- X轴方向限制 ----------------------
                  bool isImageLeftOfFrame = (_position.dx + _imageWidth) <= _frameLeft;
                  bool isImageRightOfFrame = _position.dx >= frameRight;

                  if (!isImageLeftOfFrame && !isImageRightOfFrame) {
                    // 已处于重叠状态，拖拽时吸附到最近的边界
                    if (details.delta.dx > 0) {
                      // 向右拖拽：吸附到Frame右边界（Image左边缘对齐Frame右边缘）
                      newDx = frameRight;
                    } else if (details.delta.dx < 0) {
                      // 向左拖拽：吸附到Frame左边界（Image右边缘对齐Frame左边缘）
                      newDx = _frameLeft - _imageWidth;
                    }
                  } else {
                    // 未重叠，检查移动是否会导致重叠
                    if (isImageLeftOfFrame && details.delta.dx > 0) {
                      // 向右移动靠近Frame：禁止Image右边缘超过Frame左边缘
                      if (newDx + _imageWidth > _frameLeft) {
                        newDx = _frameLeft - _imageWidth;
                      }
                    } else if (isImageRightOfFrame && details.delta.dx < 0) {
                      // 向左移动靠近Frame：禁止Image左边缘低于Frame右边缘
                      if (newDx < frameRight) {
                        newDx = frameRight;
                      }
                    }
                  }

                  // ---------------------- Y轴方向限制 ----------------------
                  bool isImageAboveFrame = (_position.dy + _imageHeight) <= _frameTop;
                  bool isImageBelowFrame = _position.dy >= frameBottom;

                  if (!isImageAboveFrame && !isImageBelowFrame) {
                    // 已处于重叠状态，拖拽时吸附到最近的边界
                    if (details.delta.dy > 0) {
                      // 向下拖拽：吸附到Frame下边界（Image上边缘对齐Frame下边缘）
                      newDy = frameBottom;
                    } else if (details.delta.dy < 0) {
                      // 向上拖拽：吸附到Frame上边界（Image下边缘对齐Frame上边缘）
                      newDy = _frameTop - _imageHeight;
                    }
                  } else {
                    // 未重叠，检查移动是否会导致重叠
                    if (isImageAboveFrame && details.delta.dy > 0) {
                      // 向下移动靠近Frame：禁止Image下边缘超过Frame上边缘
                      if (newDy + _imageHeight > _frameTop) {
                        newDy = _frameTop - _imageHeight;
                      }
                    } else if (isImageBelowFrame && details.delta.dy < 0) {
                      // 向上移动靠近Frame：禁止Image上边缘低于Frame下边缘
                      if (newDy < frameBottom) {
                        newDy = frameBottom;
                      }
                    }
                  }

                  setState(() {
                    _position = Offset(newDx, newDy);
                  });
                },
                child: Container(
                  width: _imageWidth,
                  height: _imageHeight,
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 1.0),
                  ),
                  child: Image.network(
                    'https://via.placeholder.com/300',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            Positioned(
              left: _frameLeft,
              top: _frameTop,
              child: Container(
                width: _frameWidth,
                height: _frameHeight,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 1.0),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明： #

• 移除了原代码中无关的_canDrag变量，因为我们不需要通过拖拽Frame来控制Image的拖拽状态。
• 分别对X轴和Y轴的移动进行判断：
  • 若Image已与Frame重叠，拖拽时会自动吸附到最近的边界。
  • 若Image未重叠，向Frame方向移动时会在边界处停止，避免重叠。
• 使用常量存储容器的尺寸和位置，提高代码可读性和维护性。

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