如何在Flutter中实现类似自由变换工具的自定义边框

方案1：Stack组合Container与拖拽控制点 #

这种方式通过堆叠Container和可拖拽的控制点，快速实现基础的自由变换效果，逻辑直观易懂。

代码示例 #

import 'package:flutter/material.dart';

class ResizableContainer extends StatefulWidget {
  final Widget child;
  final double initialWidth;
  final double initialHeight;
  final Color borderColor;
  final Color handleColor;

  const ResizableContainer({
    super.key,
    required this.child,
    this.initialWidth = 200,
    this.initialHeight = 200,
    this.borderColor = Colors.blue,
    this.handleColor = Colors.white,
  });

  @override
  State<ResizableContainer> createState() => _ResizableContainerState();
}

class _ResizableContainerState extends State<ResizableContainer> {
  late double _width;
  late double _height;
  late Offset _position;

  @override
  void initState() {
    super.initState();
    _width = widget.initialWidth;
    _height = widget.initialHeight;
    _position = const Offset(50, 50);
  }

  void _handleDrag(DragUpdateDetails details, String handleType) {
    setState(() {
      switch (handleType) {
        case 'topLeft':
          _width -= details.delta.dx;
          _height -= details.delta.dy;
          _position += details.delta;
          break;
        case 'topRight':
          _width += details.delta.dx;
          _height -= details.delta.dy;
          _position = Offset(_position.dx, _position.dy + details.delta.dy);
          break;
        case 'bottomLeft':
          _width -= details.delta.dx;
          _height += details.delta.dy;
          _position = Offset(_position.dx + details.delta.dx, _position.dy);
          break;
        case 'bottomRight':
          _width += details.delta.dx;
          _height += details.delta.dy;
          break;
        case 'top':
          _height -= details.delta.dy;
          _position = Offset(_position.dx, _position.dy + details.delta.dy);
          break;
        case 'bottom':
          _height += details.delta.dy;
          break;
        case 'left':
          _width -= details.delta.dx;
          _position = Offset(_position.dx + details.delta.dx, _position.dy);
          break;
        case 'right':
          _width += details.delta.dx;
          break;
      }
      // 限制最小尺寸，避免容器过小
      _width = _width.clamp(100, MediaQuery.of(context).size.width - 100);
      _height = _height.clamp(100, MediaQuery.of(context).size.height - 100);
    });
  }

  Widget _buildHandle(String handleType, double left, double top) {
    return Positioned(
      left: left,
      top: top,
      child: GestureDetector(
        onPanUpdate: (details) => _handleDrag(details, handleType),
        child: Container(
          width: 16,
          height: 16,
          decoration: BoxDecoration(
            color: widget.handleColor,
            border: Border.all(color: widget.borderColor, width: 2),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: _position.dx,
          top: _position.dy,
          child: Container(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              border: Border.all(color: widget.borderColor, width: 2),
              borderRadius: BorderRadius.circular(4),
            ),
            child: widget.child,
          ),
        ),
        // 四个角的控制点
        _buildHandle('topLeft', _position.dx - 8, _position.dy - 8),
        _buildHandle('topRight', _position.dx + _width - 8, _position.dy - 8),
        _buildHandle('bottomLeft', _position.dx - 8, _position.dy + _height - 8),
        _buildHandle('bottomRight', _position.dx + _width - 8, _position.dy + _height - 8),
        // 四条边的控制点
        _buildHandle('top', _position.dx + _width/2 - 8, _position.dy - 8),
        _buildHandle('bottom', _position.dx + _width/2 - 8, _position.dy + _height - 8),
        _buildHandle('left', _position.dx - 8, _position.dy + _height/2 - 8),
        _buildHandle('right', _position.dx + _width - 8, _position.dy + _height/2 - 8),
      ],
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: ResizableContainer(
          child: Center(child: Text('可自由变换的容器')),
        ),
      ),
    ),
  ));
}

方案2：CustomPaint自定义绘制边框与控制点 #

如果需要自定义虚线边框、特殊形状控制点等复杂样式，用CustomPaint实现更灵活。

核心思路 #

1. 自定义CustomPainter，在paint方法中绘制边框和8个控制点。
2. 通过GestureDetector监听拖拽事件，实时更新容器尺寸、位置并重绘界面。

代码示例（简化版） #

import 'package:flutter/material.dart';

class CustomResizableContainer extends StatefulWidget {
  final Widget child;
  final double initialWidth;
  final double initialHeight;

  const CustomResizableContainer({
    super.key,
    required this.child,
    this.initialWidth = 200,
    this.initialHeight = 200,
  });

  @override
  State<CustomResizableContainer> createState() => _CustomResizableContainerState();
}

class _CustomResizableContainerState extends State<CustomResizableContainer> {
  late double _width;
  late double _height;
  late Offset _position;
  final double _handleSize = 16;

  @override
  void initState() {
    super.initState();
    _width = widget.initialWidth;
    _height = widget.initialHeight;
    _position = const Offset(50, 50);
  }

  void _onPanUpdate(DragUpdateDetails details, String handle) {
    setState(() {
      // 拖拽逻辑可直接复用方案1的_handleDrag方法
      switch (handle) {
        case 'topLeft':
          _width -= details.delta.dx;
          _height -= details.delta.dy;
          _position += details.delta;
          break;
        case 'topRight':
          _width += details.delta.dx;
          _height -= details.delta.dy;
          _position = Offset(_position.dx, _position.dy + details.delta.dy);
          break;
        // 其余case省略，可参考方案1补充
      }
      _width = _width.clamp(100, MediaQuery.of(context).size.width - 100);
      _height = _height.clamp(100, MediaQuery.of(context).size.height - 100);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          left: _position.dx,
          top: _position.dy,
          child: GestureDetector(
            // 支持整体拖拽移动容器
            onPanUpdate: (details) {
              setState(() {
                _position += details.delta;
              });
            },
            child: CustomPaint(
              size: Size(_width, _height),
              painter: ResizableBorderPainter(
                handleSize: _handleSize,
              ),
              child: widget.child,
            ),
          ),
        ),
        // 这里需要给每个控制点单独添加GestureDetector，示例省略，可参考方案1的_buildHandle方法实现
      ],
    );
  }
}

class ResizableBorderPainter extends CustomPainter {
  final double handleSize;

  ResizableBorderPainter({required this.handleSize});

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制虚线边框
    final borderPaint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..strokeCap = StrokeCap.round
      ..strokeJoin = StrokeJoin.round;
    final path = Path()..addRect(Offset.zero & size);
    canvas.drawPath(
      dashPath(path, dashArray: CircularIntervalList<double>([10, 5])),
      borderPaint,
    );

    // 绘制圆形控制点
    final handlePaint = Paint()..color = Colors.white;
    final borderHandlePaint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2;

    final handles = [
      Offset(-handleSize/2, -handleSize/2),
      Offset(size.width - handleSize/2, -handleSize/2),
      Offset(-handleSize/2, size.height - handleSize/2),
      Offset(size.width - handleSize/2, size.height - handleSize/2),
      Offset(size.width/2 - handleSize/2, -handleSize/2),
      Offset(size.width/2 - handleSize/2, size.height - handleSize/2),
      Offset(-handleSize/2, size.height/2 - handleSize/2),
      Offset(size.width - handleSize/2, size.height/2 - handleSize/2),
    ];

    for (var offset in handles) {
      canvas.drawCircle(offset, handleSize/2, handlePaint);
      canvas.drawCircle(offset, handleSize/2, borderHandlePaint);
    }
  }

  @override
  bool shouldRepaint(covariant ResizableBorderPainter oldDelegate) {
    return oldDelegate.handleSize != handleSize;
  }
}

// 辅助函数：生成虚线路径
Path dashPath(Path source, {required CircularIntervalList<double> dashArray}) {
  final Path dest = Path();
  for (final PathMetric metric in source.computeMetrics()) {
    double distance = 0.0;
    bool draw = true;
    while (distance < metric.length) {
      final double len = dashArray.next;
      if (draw) {
        dest.addPath(metric.extractPath(distance, distance + len), Offset.zero);
      }
      distance += len;
      draw = !draw;
    }
  }
  return dest;
}

补充说明 #

• 方案1适合快速实现基础需求，控件组合清晰，易维护。
• 方案2支持高度自定义UI，比如虚线边框、异形控制点，适合复杂场景。
• 如果需要旋转功能，可添加额外控制点，通过Transform.rotate结合角度计算实现。

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