Flutter开发之斜角标签

　　由于公司的项目需要用到一个斜角的标签，效果如下：
　　我在GitHub和pub.dev上找了很多都没找到，于是结合了一下网上别人的思路和自己的想法决定自己写一个来实现，至于圆角我是打算用Flutter绘制进阶——贝塞尔曲线 - 掘金来画圆角。class SlantedTagView extends StatefulWidget {   final Size size;   final String labelText;   final TextStyle? textStyle;   final Color labelColor;   final Color backgroundColor;   final bool useAngle;   final int labelAlignment;    const SlantedTagView(this.size,       {super.key,       this.labelColor = Colors.black,       this.labelText = ＂movie＂,       this.useAngle = true,       this.backgroundColor = Colors.transparent,       this.labelAlignment = LabelAlignment.leftTop,       this.textStyle});    @override   State createState() {     return SlantedTagViewState();   } }   class SlantedTagViewState extends State {   static const double pi = 3.1415926;   late double textAngle;   late Alignment textAlignment;   late Offset offset;    @override   Widget build(BuildContext context) {     var offsetX = widget.size.width > widget.size.height         ? widget.size.height / 3         : widget.size.width / 3;     switch (widget.labelAlignment) {       case LabelAlignment.leftTop:         offset = Offset(offsetX, 0);         textAlignment = Alignment.topLeft;         textAngle = -pi / 4;         break;       case LabelAlignment.rightTop:         offset = Offset(-offsetX, 0);         textAlignment = Alignment.topRight;         textAngle = pi / 4;         break;       case LabelAlignment.leftBottom:         offset = Offset(offsetX, 0);         textAlignment = Alignment.bottomLeft;         textAngle = pi / 4;         break;       case LabelAlignment.rightBottom:         offset = Offset(-offsetX, 0);         textAlignment = Alignment.bottomRight;         textAngle = -pi / 4;         break;     }      return Container(       color: widget.backgroundColor,       width: widget.size.width,       height: widget.size.height,       child: CustomPaint(         size: widget.size,         painter: LabelViewPainter(             widget.labelColor, widget.labelAlignment, widget.useAngle),         child: Align(             alignment: textAlignment,             child: Transform.rotate(               angle: textAngle,               origin: offset,               child: Text(                 widget.labelText,                 style: widget.textStyle ?? const TextStyle(color: Colors.white),                 textAlign: TextAlign.center,               ),             )),       ),     );   } }  class LabelAlignment {   int labelAlignment;    LabelAlignment(this.labelAlignment);    static const leftTop = 0;   static const leftBottom = 1;   static const rightTop = 2;   static const rightBottom = 3; }
　　使用自定义paint来绘画： class LabelViewPainter extends CustomPainter {   Color labelColor;   int labelAlignment;   bool useAngle;   late Paint _paint;    LabelViewPainter(this.labelColor, this.labelAlignment, this.useAngle) {     _paint = Paint()       ..color = labelColor       ..strokeCap = StrokeCap.square       ..isAntiAlias = true       ..style = PaintingStyle.fill       ..strokeWidth = 10.0;   }    @override   void paint(Canvas canvas, Size size) {     var drawSize = size.height > size.width ? size.width / 2 : size.height / 2;     Path path = Path();      switch (labelAlignment) {       case LabelAlignment.leftTop:         if (!useAngle) {           path.moveTo(0, drawSize / 2.2);           path.quadraticBezierTo(0, 0, drawSize / 2.2, 0);         }         path.lineTo(drawSize, 0);         path.lineTo(0, drawSize);          break;                // 下面的左下角、右上角、右下角和上面的类似的，使用moveTo移动画笔       // 使用lineTo画线就可以了       case LabelAlignment.leftBottom:         break;       case LabelAlignment.rightTop:         break;       case LabelAlignment.rightBottom:         break;     }      path.close();     canvas.drawPath(path, _paint);   }    @override   bool shouldRepaint(CustomPainter oldDelegate) {     return true;   } }
　　然后就是使用：class Test extends StatelessWidget {   const Test({super.key});    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: const Text(＂SlantedEdge＂),       ),       body: Container(         width: 200.w,         height: 200.w,         decoration: BoxDecoration(             color: Colors.white, borderRadius: BorderRadius.circular(40.w)),         child: SlantedTagView(           Size(100.w, 100.w),           useAngle: false,           labelText: ＂Available＂,           textStyle: TextStyle(color: Colors.white, fontSize: 12.sp),         ),       ),     );   } }
　　这个就是最终的效果图：