Flutter中如何在Row的Expanded图片间添加斜向分隔线？

你可以通过两种方式实现需求，下面是具体代码和说明：

方法一：ClipPath裁剪图片边缘 #

通过自定义Clipper给左右两张图片分别裁剪出斜角，中间搭配纯色分隔条，效果更自然。

1. 自定义Clipper类 #

class DiagonalClipper extends CustomClipper<Path> {
  final bool isLeftImage;

  DiagonalClipper(this.isLeftImage);

  @override
  Path getClip(Size size) {
    final path = Path();
    if (isLeftImage) {
      // 左图：右下角斜切，调整最后一个Offset的x值控制斜度
      path.lineTo(size.width, 0);
      path.lineTo(size.width, size.height);
      path.lineTo(0, size.height);
      path.lineTo(size.width - 25, 0);
      path.close();
    } else {
      // 右图：左上角斜切，调整Offset的x值控制斜度
      path.lineTo(0, size.height);
      path.lineTo(size.width, size.height);
      path.lineTo(size.width, 0);
      path.lineTo(25, 0);
      path.close();
    }
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

2. 在Row中使用 #

Row(
  children: [
    Expanded(
      child: ClipPath(
        clipper: DiagonalClipper(true),
        child: Image.network(
          '你的左图地址',
          fit: BoxFit.cover,
          height: double.infinity,
        ),
      ),
    ),
    // 中间的纯色分隔条，可调整宽度和颜色
    Container(width: 2, color: Colors.white),
    Expanded(
      child: ClipPath(
        clipper: DiagonalClipper(false),
        child: Image.network(
          '你的右图地址',
          fit: BoxFit.cover,
          height: double.infinity,
        ),
      ),
    ),
  ],
)

方法二：Stack叠加CustomPaint画分割线 #

如果不想裁剪图片，直接在两张图片上方叠加斜向分割线，适合需要保留图片完整的场景。

1. 自定义Painter类 #

class DiagonalDividerPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final dividerPaint = Paint()
      ..color = Colors.white
      ..strokeWidth = 2
      ..style = PaintingStyle.stroke;

    // 定义斜向线的起点和终点，调整Offset值改变角度和位置
    final start = Offset(size.width / 2 - 30, 0);
    final end = Offset(size.width / 2 + 30, size.height);
    canvas.drawLine(start, end, dividerPaint);

    // 如果需要填充式的斜向分隔带，替换上面的drawLine为以下代码：
    // final path = Path()
    //   ..moveTo(size.width/2 - 10, 0)
    //   ..lineTo(size.width/2 + 10, 0)
    //   ..lineTo(size.width/2 + 35, size.height)
    //   ..lineTo(size.width/2 - 35, size.height)
    //   ..close();
    // canvas.drawPath(path, dividerPaint..style = PaintingStyle.fill);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

2. 在Stack中使用 #

Stack(
  children: [
    Row(
      children: [
        Expanded(child: Image.network('左图地址', fit: BoxFit.cover)),
        Expanded(child: Image.network('右图地址', fit: BoxFit.cover)),
      ],
    ),
    // 叠加分割线
    Positioned.fill(
      child: CustomPaint(painter: DiagonalDividerPainter()),
    ),
  ],
)

调整技巧 #

• 修改Clipper或Painter中的数值可以控制斜度、分隔线宽度/位置
• 图片需设置fit: BoxFit.cover保证填充容器，避免拉伸变形
• 若需要分隔线带阴影，可在Container或CustomPaint外层添加BoxDecoration实现

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