flutter 绘制右上角圆角三角形标签

原创已于 2023-11-16 14:25:18 修改 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript #开发语言

于 2023-11-16 14:24:33 首次发布

文章介绍了如何在Flutter中使用CustomPainter创建一个自定义的LabelTopRightYellow组件，该组件能在右上角绘制带有弧形的标签，适用于特定场景的UI设计。

在这里插入图片描述
绘制：

import 'package:jade/utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;

class LabelTopRightYellow extends StatefulWidget {
  final String labelTitle; // 只能两个字的（文字偏移量没有根据文字长度改变）
  const LabelTopRightYellow({@required this.labelTitle});
  @override
  State<StatefulWidget> createState() {
    return LabelViewState();
  }
}

class LabelViewState extends State<LabelTopRightYellow> with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: ArcPainter(labelTitle: widget.labelTitle),
      size: Size(35,35), // 调整大小以适应你的需求
    );
  }
}

class ArcPainter extends CustomPainter {

  //标签文字
  String labelTitle;
  ArcPainter({this.labelTitle});

  @override
  void paint(Canvas canvas, Size size) {
    double originX = 0.0 ;
    double originY = 0.0 ;

    double cx = size.width / 2;
    double cy = size.height / 2;
    Paint _paint = Paint()
      ..color = Color(0xffFFE50F)
      ..strokeWidth = 2
    //画笔是线段（默认是fill填充）
    /*..style = PaintingStyle.stroke*/;

    // canvas.drawCircle(Offset(cx,cy), 2, _paint);


    Path path = Path();
    // 绘制圆锥路径 权重越大路径越接近直角（不使用path.moveTo时，默认起点为左上角）
    path.conicTo(originX + size.width, originY, originX + size.width, originY+ size.height, 10);
    // 控制路径是否闭合，可不写
    path.close();
    canvas.drawPath(path, _paint);
    canvas.save();
    canvas.restore();

    TextPainter textPainterCenter = TextPainter(
      text: TextSpan(text: labelTitle, style: TextStyle(color: Color(0xff333333),fontSize: 10)),
      textDirection: TextDirection.ltr,
    );
    textPainterCenter.layout();
    canvas.rotate(math.pi / 4);
    canvas.translate(-math.pi , -((cy - math.pi)  * 2));
    textPainterCenter.paint(canvas, Offset(cx /*- textPainterCenter.size.width / 2*/,cy - textPainterCenter.size.height / 4));
    canvas.save();
    canvas.restore();
  }

  /// 度数转类似于π的那种角度
  double degToRad(double deg) => deg * (math.pi / 180.0);

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

引用：

Container(
	height: 180.w
      margin: EdgeInsets.symmetric(horizontal: 20.w),
      padding: EdgeInsets.only(left: 20.w),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(8),
          boxShadow: [BoxShadow(color: JadeColors.grey_4,blurRadius: 2.0,offset: Offset(0.0, 0.0),)]
      ),
      child: Column(
        children: [
          _userView(),
          SizedBox(height: 20.w),
          _productView(),
          _countdownView()
        ],
      ),
    )
_userView(){
    return Stack(
      alignment: Alignment.topRight,
      children: [
        Row(
          children: [
            Container(
              width: 70.w,
              height: 70.w,
              margin: EdgeInsets.only(right: 20.w),
              child: Utils().roundedImage(PathConfig.testImageUrl[3], 70),
            ),
            Expanded(child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('商户商户商户商户',style: TextStyle(fontSize: 30.sp,color: JadeColors.grey_2,fontWeight: FontWeight.w600),maxLines: 1,overflow: TextOverflow.ellipsis,),
                Text('10分钟前',style: TextStyle(fontSize: 22.sp,color: JadeColors.grey))
              ],
            ))
          ],
        ),
        LabelTopRightYellow(labelTitle: S.current.cuxiao,)
      ],
    );
  }