Flutter中如何在CustomPaint的Container外部绘制线条？

要让线条完全位于Container外部，核心是解决stroke绘制居中导致的半内半外问题，同时确保CustomPaint能容纳外部的线条不被裁剪，具体修改如下：

1. 调整CustomPainter的路径偏移 #

由于Stroke是沿路径居中绘制的（strokeWidth的一半在路径内侧，一半在外侧），所以需要将绘制路径整体向外偏移strokeWidth/2的距离，让线条完全落在Container外部。同时优化shouldRepaint方法，避免不必要重绘。

修改后的SeatDecorator代码：

class SeatDecorator extends CustomPainter {
  final double strokeWidth;

  SeatDecorator({this.strokeWidth = 8.0});

  @override
  void paint(Canvas canvas, Size size) {
    final double offset = strokeWidth / 2;
    Paint paint = Paint()
      ..color = Colors.blue
      ..strokeCap = StrokeCap.square
      ..style = PaintingStyle.stroke
      ..strokeJoin = StrokeJoin.round
      ..strokeWidth = strokeWidth;

    // 计算Container的实际尺寸（扣除偏移量）
    final double containerHeight = size.height - offset;

    Path path = Path();
    // 左边缘中间（偏移后位置）
    path.moveTo(offset, offset + containerHeight / 2);
    // 左上角（偏移后位置）
    path.lineTo(offset, offset);
    // 右上角（偏移后位置）
    path.lineTo(size.width - offset, offset);
    // 右边缘中间（偏移后位置）
    path.lineTo(size.width - offset, offset + containerHeight / 2);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant SeatDecorator oldDelegate) {
    return oldDelegate.strokeWidth != strokeWidth;
  }
}

2. 给Container添加Padding，扩展CustomPaint的绘制区域 #

因为路径偏移后超出了原Container的尺寸，需要让CustomPaint的尺寸包含偏移部分，否则超出的线条会被裁剪。通过给Container包裹Padding，让CustomPaint自动适配扩展后的尺寸：

修改后的主Widget代码：

Center(
  child: CustomPaint(
    painter: SeatDecorator(strokeWidth: 8),
    child: Padding(
      // 上下左右偏移量为strokeWidth/2，底部无需偏移（线条只到Container中间）
      padding: const EdgeInsets.only(top: 4, left: 4, right: 4),
      child: Container(
        width: 150,
        height: 150,
        color: Colors.blue.withOpacity(0.5),
      ),
    ),
  ),
)

原理说明 #

• 原问题中，线条沿Container边缘绘制，strokeWidth的一半会落在Container内部，一半在外部；
• 通过将路径向外偏移strokeWidth/2，让整个线条都位于Container边缘外侧；
• 用Padding扩展CustomPaint的绘制区域，确保偏移后的线条不会被裁剪。

内容的提问来源于stack exchange，提问作者sm-sayedi