如何设置带有锥形边框的按钮的形状 [英] How to set the shape of a button with conical border

问题描述

我正在处理 Flutter 中的按钮，并且想在我的应用程序中更改按钮的形状.如何为我的按钮设置锥形边框?

I'm dealing with buttons in flutter,and want to change the shape of the button in my application. How can I get a conical border for my button?

推荐答案

您可以使用 CustomPaint 小部件来绘制您的按钮形状.

You can create your own one using CustomPaint widget to draw your button shape.

class MyButton extends StatelessWidget {
  final double width;
  final double height;
  final Color color;
  final Widget child;
  final VoidCallback onPressed;

  const MyButton({
    Key key,
    this.width = 150.0,
    this.height = 75.0,
    this.color,
    @required this.child,
    @required this.onPressed,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed,
      child: Container(
        width: width,
        height: height,
        child: CustomPaint(
          painter: MyButtonPainter(
              color: color != null ? color : Theme.of(context).primaryColor),
          child: Center(child: child),
        ),
      ),
    );
  }
}

class MyButtonPainter extends CustomPainter {
  final Color color;

  MyButtonPainter({this.color});
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()..color = color;
    final double arrowDepth = size.height / 2;

    final Path path = Path();

    path.lineTo(size.width - arrowDepth, 0.0);
    path.lineTo(size.width, size.height / 2);
    path.lineTo(size.width - arrowDepth, size.height);
    path.lineTo(0.0, size.height);
    path.lineTo(arrowDepth, size.height / 2);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

用法

MyButton(
  width: 300.0,
  child: Text(
    'Time',
    style:
        Theme.of(context).textTheme.title.copyWith(color: Colors.white),
  ),
  onPressed: () {},
),

您可以根据需要微调代码

You can fine tune the code as per your requirements

这篇关于如何设置带有锥形边框的按钮的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！