像气球/工具提示小部件一样的Flutter设计Instagram

Question

在扑朔迷离中，我想将此布局设计为小部件

当前执行的代码具有以下结果：

您能帮我解决此问题吗？

因为高度/重量和角落应该可自定义，我应该在其中放入一些小部件，例如：

class MessageClipper extends CustomClipper<Path> {
  MessageClipper({this.borderRadius = 15});
  final double borderRadius;
  @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<Path> oldClipper) => true;
}

Answer 1

编辑：如问题Flutter - ClipPath所述，这将是实现所需目标的正确方法：

public class PositionAnimator extends Animator<Point>{}

这是使用方法：

class TooltipShapeBorder extends ShapeBorder {
  final double arrowWidth;
  final double arrowHeight;
  final double arrowArc;
  final double radius;

  TooltipShapeBorder({
    this.radius = 16.0,
    this.arrowWidth = 20.0,
    this.arrowHeight = 10.0,
    this.arrowArc = 0.0,
  }) : assert(arrowArc <= 1.0 && arrowArc >= 0.0);

  @override
  EdgeInsetsGeometry get dimensions => EdgeInsets.only(bottom: arrowHeight);

  @override
  Path getInnerPath(Rect rect, {TextDirection textDirection}) => null;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    rect = Rect.fromPoints(rect.topLeft, rect.bottomRight - Offset(0, arrowHeight));
    double x = arrowWidth, y = arrowHeight, r = 1 - arrowArc;
    return Path()
      ..addRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)))
      ..moveTo(rect.bottomCenter.dx + x / 2, rect.bottomCenter.dy)
      ..relativeLineTo(-x / 2 * r, y * r)
      ..relativeQuadraticBezierTo(-x / 2 * (1 - r), y * (1 - r), -x * (1 - r), 0)
      ..relativeLineTo(-x / 2 * r, -y * r);
  }

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

  @override
  ShapeBorder scale(double t) => this;
}

这将是结果：

如果要更改箭头的曲率，可以使用@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Instagram Like Balloon Tooltip'), ), body: Center( child: Container( decoration: ShapeDecoration( color: Colors.red, shape: TooltipShapeBorder(arrowArc: 0.5), shadows: [ BoxShadow( color: Colors.black26, blurRadius: 4.0, offset: Offset(2, 2)) ], ), child: Padding( padding: EdgeInsets.all(16.0), child: Text('Text 22', style: TextStyle(color: Colors.white)), ), ), ), ); } 的{​​{1}}属性，如果将其设置为arrowArc，则不会有任何曲率，并且如果将其设置为TooltipShapeBorder，它将具有最大的曲率。

要查看0.0的工作方式以及如何制作其他形状，请检查以下链接：Paths in Flutter: A Visual Guide