像气球小部件一样颤抖地设计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

您可以使用带有圆角边框的Container，并在下面添加一个三角形，如下所示：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Like Balloon'),
    ),
    body: Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(12.0),
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(12.0),
            ),
            child: Text('Text 22', style: TextStyle(color: Colors.white)),
          ),
          CustomPaint(
            painter: TrianglePainter(
              strokeColor: Colors.red,
              strokeWidth: 10,
              paintingStyle: PaintingStyle.fill,
            ),
            child: Container(
              height: 10.0,
              width: 20.0,
            ),
          ),
        ],
      ),
    ),
  );
}

在此示例中，您可以检查TrianglePainter的代码：Flutter button with custom shape - (triangle)

并像这样更改getTrianglePath()的TrianglePainter方法：

Path getTrianglePath(double x, double y) {
  return Path()
    ..moveTo(0, 0)
    ..lineTo(x, 0)
    ..lineTo(x / 2, y)
    ..lineTo(0, 0);
}

这将是结果：

---

编辑：如果您想要三角形的圆角，可以执行以下操作：

Path getTrianglePath(double x, double y) {
  return Path()
    ..moveTo(0, 0)
    ..lineTo(x, 0)
    ..lineTo(3/4 * x, y/2)
    ..quadraticBezierTo(x/2, y, 1/4 * x, y/2)
    ..lineTo(0, 0);
}

这将是结果：

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