flutter - 如何为剪切的图像添加边框？

Question

我可以使用 ClipPath 剪辑图像，但是如何为该剪辑的图像添加边框，如下所示？

Answer 1

你可以这样解决:

1. 创建一个 CustomPainter同Path在 CustomClipper<Path>

Example :

Path path = Path();
path.lineTo(0.0, 0.0);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height * 0.8);
path.lineTo(0.0, size.height);
path.close();

1. 创建一个 Paint对象和带有 Stroke 绘画风格和 strokeWidth是自定义边框的宽度

CODE

Paint paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth=10.0
  ..color = Colors.black;

最后在 canvas 中绘制这条路径

canvas.drawPath(path, paint);

您还需要确保 CustomPaint是你的容器的 child

ClipPath(
          clipper: traingleclipper(),
          child: Container(
            color: Colors.white,
            child: CustomPaint(
              painter: ClipperBorderPainter(),
            ),
          ),
        )

在我的示例中，结果如下:

还有另一种使用 Stack 的方法这样，您将使用裁剪器创建图像，然后创建 CustomPaint同Path

Stack(
          children: <Widget>[
            ClipPath(
              clipper: CustomClip(),
                child: Image.network(
              "http://www.delonghi.com/Global/recipes/multifry/pizza_fresca.jpg",
              width: double.infinity,
              height: 400.0,
                  fit: BoxFit.cover,
            )),
            CustomPaint(
              painter: BorderPainter(),
              child: Container(
                height: 400.0,
              ),
            ),
          ],
        ),

Full Example