具有自定义形状的Flutter按钮 (如：三角形)

发布于07月09日

我已经创建了一个圆形按钮，在本例中是RawMaterialButton，我试图使用CustomPaint在它的中心创建一个三角形，但它说明ShapesPainter没有为类ClearButton'. I tried other buttons but couldn't get any of them to acceptShapePainter`定义.

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,
        )

ShapesPainter应该使用哪种类型的按钮，或者我如何创建中心带有三角形或其他形状的圆形按钮？

这是我试图创建的按钮，如您所见，它基本上是一个带三角形的圆形按钮.

推荐答案

您可以通过创建自己的自定义Paint实现来完成此操作.

Triangle Painter

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;
  }
}

USAGE个

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,
            ),
          ),
        ),
      ),
    );
  }
}