如何在颤动中绘制自定义动态高度曲线形状？

Posted 2023-02-23

【中文标题】如何在颤动中绘制自定义动态高度曲线形状？

【英文标题】：How to draw custom dynamic height curved shape in flutter?

【发布时间】：2021-02-18 01:40:37

【问题描述】：

我想在 Flutter 中绘制以下自定义形状

到目前为止，我已经尝试过使用CustomPainter

class MyBottomPainter extends CustomPainter 
  final Color color;

  MyBottomPainter(this.color);

  @override
  void paint(Canvas canvas, Size size) 
    var paint = Paint()
      ..color = color ?? Colors.black.withOpacity(0.7)
      ..style = PaintingStyle.fill;

    var rect = Rect.fromCircle(
        center: Offset(size.width * 0.110, size.height * 0.835), radius: 40.0);

    var path = Path()
      ..moveTo(0, size.height * 0.875)
      ..addArc(rect, 0, size.width * 0.100)
      ..quadraticBezierTo(
          0, size.height * 0.875, size.width * 0.100, size.height * 0.675)
      ..quadraticBezierTo(size.width * 0.100, size.height * 0.675,
          size.width - 40.0, size.height * 0.675)
      ..quadraticBezierTo(size.width, size.height * 0.645, size.width,
          size.height * 0.675 - 40.0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height);

    canvas.drawPath(path, paint);
  

  @override
  bool shouldRepaint(CustomPainter oldDelegate) 
    return true;
  

我也尝试过使用ShapeBorder

class BottomShapeBorder extends ShapeBorder 
  const BottomShapeBorder();

  @override
  Path getInnerPath(Rect rect, TextDirection textDirection) => _getPath(rect);

  @override
  Path getOuterPath(Rect rect, TextDirection textDirection) => _getPath(rect);

  _getPath(Rect rect) 
    final r = rect.height / 2;
    final radius = Radius.circular(r);
    final offset = Rect.fromCircle(center: Offset.zero, radius: r);
    return Path()
      ..moveTo(rect.topLeft.dx, rect.topLeft.dy)
      ..relativeArcToPoint(offset.bottomLeft, clockwise: false, radius: radius)
      ..relativeArcToPoint(offset.bottomRight, clockwise: true, radius: radius)
      ..relativeArcToPoint(offset.topRight, clockwise: true, radius: radius)
      ..lineTo(rect.centerRight.dx - r, rect.centerRight.dy)
      ..relativeArcToPoint(offset.topRight, clockwise: false, radius: radius)
      ..addRect(rect);
  

  @override
  EdgeInsetsGeometry get dimensions 
    return EdgeInsets.all(0);
  

  @override
  ShapeBorder scale(double t) 
    return BottomShapeBorder();
  

  @override
  void paint(Canvas canvas, Rect rect, TextDirection textDirection) 
  

但是使用以上两种方法我都没有得到预期的输出

谁能帮我创建这种类型的自定义形状？

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

【问题讨论】：

你只是想要一个Path 或者如何制作那种模糊的效果？

@pskink 我只想根据内容制作具有动态高度的Path

@override Path getOuterPath(Rect rect, ui.TextDirection textDirection) final RADIUS = 64.0; var r = Radius.circular(RADIUS); var rect0 = EdgeInsets.only(top: RADIUS).deflateRect(rect); var rrect = RRect.fromRectAndCorners(rect0, topLeft: r, bottomLeft: r, bottomRight: r); return Path() ..moveTo(rect.topRight.dx, rect.topRight.dy) ..arcToPoint(rect.topRight + Offset(-RADIUS, RADIUS), radius: r) ..relativeLineTo(RADIUS, 0) ..addRRect(rrect);

@pskink 你能把上面的评论作为回答我如何使用上面的代码吗？

它被覆盖getOuterPath 方法 - 只需用你的版本替换它

【参考方案1】：

您可以为此使用容器装饰

Container(
    decoration: BoxDecoration(
              color: Color.black,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(20),
                bottomRight: Radius.circular(20),
              )),
)