Flutter - ClipPath

Question

13 浏览2023年6月10日

匿名的 2023年6月10日

0 Comments

如何创建上面的自定义clipPath小部件？（我附上了截图）

我尝试过，但输出不准确。

Clipper类

class MessageClipper extends CustomClipper {


  final double borderRadius = 15;
  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    double rheight = height - height / 3;
    double oneThird = width / 3;
    final path = Path()
      ..lineTo(0, rheight - borderRadius)
      ..cubicTo(0, rheight - borderRadius, 0, rheight, borderRadius, rheight)
      ..lineTo(oneThird, rheight)
      ..lineTo(width/2-borderRadius, height-borderRadius)
      ..cubicTo(width / 2 - borderRadius, height - borderRadius, width / 2,
          height, width / 2 + borderRadius, height - borderRadius )
      ..lineTo(2 * oneThird, rheight)
      ..lineTo(width-borderRadius, rheight)
      ..cubicTo(width - borderRadius, rheight, width, rheight, width,
          rheight - borderRadius)
      ..lineTo(width, 0)
      ..lineTo(0, 0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper oldClipper) => true;
}

我在这里调用了这个方法

Center(


        child: ClipPath(
        clipper: MessageClipper(),
    child: Container(
      height: 41.66,
      width: 91.63,
    decoration: BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(16.0)),
    color: Colors.red,
    ),
    child:
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 7,
          height: 8,
          decoration: BoxDecoration(
              color: Color(0xFFCCCCCC),
              shape: BoxShape.circle),
        ),
        Container(
          width: 25,
          height: 24,
          decoration: BoxDecoration(
              color: Color(0xFF1287BA),
              shape: BoxShape.circle),
          child: Center(
            child: Text(
              "17",
              style: TextStyle(color: Color(0xFFFFFFFF)),
            ),
          ),
        ),
      ],
    ),
    ),)
    )

无法像这样在Container中居中Center项，

我需要像这样的小部件

我的小部件

0

1 答案

匿名的 · Answer 1 · 2023-06-28T20:08:20+00:00

Flutter中的ClipPath问题是由于自定义的ShapeBorder导致的。解决方法是修改getOuterPath方法中的代码。

在给定的代码中，MessageBorder类是一个自定义的ShapeBorder，它定义了一个具有圆角和V形切口的形状。在getOuterPath方法中，通过使用addRRect方法创建一个带有圆角的矩形，然后使用moveTo和relativeLineTo方法创建了V形切口。通过调整这些方法的参数，可以改变V形切口的高度。

在给定的代码中，V形切口的高度是固定的，无法通过修改容器的高度来改变。要改变V形切口的高度，可以修改getOuterPath方法中的代码。具体来说，可以通过调整moveTo方法的偏移量来改变切口的高度。

例如，可以将moveTo方法的偏移量从rect.bottomCenter.dy更改为rect.bottomCenter.dy - 18来增加切口的高度。这样，V形切口的高度就会随着偏移量的改变而改变。

下面是修改后的getOuterPath方法的代码：


Path getOuterPath(Rect rect, {TextDirection textDirection}) {
  rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, 20));
  return Path()
    ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(rect.height / 2)))
    ..moveTo(rect.bottomCenter.dx - 18, rect.bottomCenter.dy)
    ..relativeLineTo(10, 20)
    ..relativeLineTo(20, -20)
    ..close();
}

通过这种方式，可以根据需要调整V形切口的高度。