Flutter 自定义裁剪器半径

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() 放在一起以提供圆角边缘。

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

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

圆角矩形我用了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;
      }
    }

Answer 3

另一种实现方法是在每次愤怒之前使用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 px 的形状：

Flutter 自定义裁剪器半径

Flutter Custom Clipper Radius

flutter

widget

paint

clip