具有自定义形状的颤振按钮-（三角形） [英] Flutter button with custom shape - (triangle)

问题描述

我创建了一个圆形按钮，本例中为 RawMaterialButton ，而我尝试使用 CustomPaint 在其中心创建三角形形状，但这是说 ShapesPainter 没有为 ClearButton'类定义。我尝试了其他按钮，但没有其他按钮可以接受 ShapesPainter`。

I've created a circular button which in this case is RawMaterialButton and I'm trying to use CustomPaint to create a triangle shape in the centre of it, but it's saying ShapesPainter is not defined for the class ClearButton'. I tried other buttons but couldn't get any of them to acceptShapesPainter`.

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

哪个按钮类型应与<$ c一起使用$ c> ShapesPainter 还是我该如何创建一个在中心具有三角形或其他形状的圆形按钮？

Which button type should be used with ShapesPainter or how can I otherwise create a circular button with a triangle or another shape in the centre?

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

This is the button I was trying to create which as you can see is basically a circular button with a triangle.

推荐答案

您可以通过创建自己的自定义Painter实现来实现。

You can do it by creating your own custom painter implementation.

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

使用

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

这篇关于具有自定义形状的颤振按钮-（三角形）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！