Question

我试图通过FLutter中的“自定义裁剪器”制作自定义裁剪器，但我不知道如何在“形状”中添加一些圆角

所需结果的屏幕截图在左侧，我的结果在右侧：

这是我的快船代码

class SideArrowClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();
    final double startMargin = size.width / 14;
    final double s1 = size.height * 0.4;
    final double s2 = size.height * 0.6;
    print('S1:$s1 SH:${size.height / 2} S2:$s2');
    path.lineTo(startMargin, 0);
    path.lineTo(startMargin, s1);
    path.lineTo(0, size.height / 2);
    path.lineTo(startMargin, s2);
    path.lineTo(startMargin, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

Answer 1

我建议您看看这个flutter_custom_clippers插件。该插件使您可以使用各种有趣的形状，例如下图所示的MessageClipper()。如果旋转90度，则可以满足您的需求。

或者，您可以将TriangleClipper()和带有椭圆形边框的简单Container()放在一起，以得到圆润的边缘。

如上面链接中的示例所示，它看起来像这样：

ClipPath(
  clipper: MessageClipper(borderRadius: 16),
  child: Container(
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(16.0)),
      color: Colors.red,
    ),
    child: Center(child: Text("MessageClipper()")),
),

Answer 2

另一种实现方法是在每次发怒之前使用path.arcToPoint方法。这是我如何实现的示例：

  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(2.0, 0.0);
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1 , 0.0);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1 , 2.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - 1, size.height/2 - 1);
    path.arcToPoint(Offset(size.width - 1, size.height/2 + 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL + 1, size.height - 1);
    path.arcToPoint(Offset(size.width - size.width/PolygonClipperConst.RATIO_CLIPPER_VAL - 1, size.height), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(2, size.height);
    path.arcToPoint(Offset(0.0, size.height - 1), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.lineTo(0.0, 1.0);
    path.arcToPoint(Offset(1.0, 0.0), radius: Radius.circular(PolygonClipperConst.RADIUS));
    path.close();
    return path;
  }

这是一个半径角半径为2像素的形状：

Answer 3

我将addRRect(RRect.fromRectAndRadius用于圆角矩形

import 'package:flutter/material.dart';

    class SideArrowClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final double width = size.width;
        final double height = size.height;
        final double startMargin = width / 14;

        final double s1 = height * 0.3;
        final double s2 = height * 0.7;
        final Path path = Path()
          ..addRRect(RRect.fromRectAndRadius(
              Rect.fromLTWH(startMargin, 0, width-startMargin, height),
              const Radius.circular(5)))
          ..lineTo(startMargin, s1)
          ..lineTo(0, size.height / 2)
          ..lineTo(startMargin, s2)
          ..close();
        return path;
      }

      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return oldClipper != this;
      }
    }

Flutter自定义快船半径

3 个答案: