绘制:
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({ this.labelTitle});
State<StatefulWidget> createState() {
return LabelViewState();
}
}
class LabelViewState extends State<LabelTopRightYellow> with SingleTickerProviderStateMixin {
Widget build(BuildContext context) {
return CustomPaint(
painter: ArcPainter(labelTitle: widget.labelTitle),
size: Size(35,35), // 调整大小以适应你的需求
);
}
}
class ArcPainter extends CustomPainter {
//标签文字
String labelTitle;
ArcPainter({this.labelTitle});
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);
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,)
],
);
}