具有自定义形状的颤振按钮-（三角形）

Question

我创建了一个圆形按钮，在这种情况下为RawMaterialButton，我正尝试使用CustomPaint在其中心创建一个三角形，但这是说{{1} }没有为ShapesPainter ShapesPainter`类定义。

ClearButton'. I tried other buttons but couldn't get any of them to accept

RawMaterialButton( child: CustomPaint( painter: ShapesPainter(), child: Container( height: 40, ), ), onPressed: onPressed, constraints: BoxConstraints.tightFor( width: 90.0, height: 90.0, ), shape: RoundedRectangleBorder(), fillColor: Colors.transparent, ) 应该使用哪种按钮类型？否则如何创建一个以三角形或其他形状为中心的圆形按钮？

这是我尝试创建的按钮，您可以看到它基本上是一个带有三角形的圆形按钮。

Answer 1

创建CustomClipper

class CustomTriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

然后是用法：

ClipPath(
    clipper: CustomTriangleClipper(),
    child: Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomLeft,
          end: Alignment.topRight,
          colors: [Color(0xffF25D50), Color(0xffF2BB77)],
        ),
      ),
    ),
  );

Answer 2

您可以通过创建自己的自定义绘画工具实现来实现。

三角画家

class TrianglePainter extends CustomPainter {
  final Color strokeColor;
  final PaintingStyle paintingStyle;
  final double strokeWidth;

  TrianglePainter({this.strokeColor = Colors.black, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()
      ..color = strokeColor
      ..strokeWidth = strokeWidth
      ..style = paintingStyle;

    canvas.drawPath(getTrianglePath(size.width, size.height), paint);
  }

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

  @override
  bool shouldRepaint(TrianglePainter oldDelegate) {
    return oldDelegate.strokeColor != strokeColor ||
        oldDelegate.paintingStyle != paintingStyle ||
        oldDelegate.strokeWidth != strokeWidth;
  }
}

用法

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RawMaterialButton(
          onPressed: () {},
          child: CustomPaint(
            painter: TrianglePainter(
              strokeColor: Colors.blue,
              strokeWidth: 10,
              paintingStyle: PaintingStyle.fill,
            ),
            child: Container(
              height: 180,
              width: 200,
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

下面是您可以参考的代码。

class MyButton extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Offset centerPoint = Offset(100, 100);
    double radius = 60;
    double triangleA = 35;   // this the dimension of triangle's side
    double triangleR = triangleA / sqrt(3.0);   // this the distance between the center of triangle/circle to corner of triangle

    // I am drawing here circle, while you can draw your shape as per your convenience.
    canvas.drawCircle(
        centerPoint,
        radius,
        Paint()
          ..color = Colors.grey[700]
          ..style = PaintingStyle.fill);

    Path path = Path();

    double x1Point = centerPoint.dx + triangleR * cos(3 * pi / 2);
    double y1Point = centerPoint.dy + triangleR * sin(3 * pi / 2);
    path.moveTo(x1Point, y1Point);

    double x2Point = centerPoint.dx +
        triangleR * cos((3 * pi / 2) - Angle.fromDegrees(120).radians);
    double y2Point = centerPoint.dy +
        triangleR * sin((3 * pi / 2) - Angle.fromDegrees(120).radians);
    path.lineTo(x2Point, y2Point);

    double x3Point = centerPoint.dx +
        triangleR * cos((3 * pi / 2) + Angle.fromDegrees(120).radians);
    double y3Point = centerPoint.dy +
        triangleR * sin((3 * pi / 2) + Angle.fromDegrees(120).radians);
    path.lineTo(x3Point, y3Point);

    path.close();

    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.deepOrange
          ..style = PaintingStyle.fill);

    canvas.save();
    canvas.restore();
  }

RawMaterialButton(
 child: CustomPaint(
   painter: MyButton(),
   child: GestureDetector(
     onTap: () {
        print('Here, you can handle button click event');
     },
   ),
 ),
 onPressed: () {
 },
)