flutter 自定义订单右上角镂空Lable背景
·
效果图:

样式要求:白色背景右上角镂空效果,右上角白色镂空地方增加一个蓝色的lable显示位
思路:先在右上角绘制一个蓝色的lable,在通过路径绘制一个右上角镂空的白色背景,
使用贝塞尔曲线绘制圆角流畅相接斜线
代码:
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
class RoundedRectPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var radius = 10.0.w;
final paint = Paint()
..color = Colors.white
..style = PaintingStyle.fill;
final path = Path();
final bluePaint = Paint()
..color = Colors.blue
..style = PaintingStyle.fill;
// 蓝色背景先画
final blueRect = RRect.fromRectAndRadius(
Rect.fromLTWH(260.w, 5, 75.w, 40), // 矩形位置和大小
Radius.circular(5.w), // 圆角半径
);
canvas.drawRRect(blueRect, bluePaint);
// ====== 起点左上角 ======
path.moveTo(radius, 0); // 左上圆角开始
// ====== 第一条横线 (右上角前) ======
path.lineTo(270.w, 0);
// ====== 第一个圆角 (右上角) ======
path.quadraticBezierTo(
275.w, 0, // 控制点(往外拉一点)
280.w, 10.w, // 终点(原 arcToPoint 的终点)
);
// ====== 第二个圆角 (竖线 → 横线) ======
path.lineTo(285.w, 20.w);
// ====== 斜线到第二个圆角 ======
path.quadraticBezierTo(
290.w, 30.w, // 控制点(在拐角外侧)
295.w, 30.w, // 终点
);
// ====== 横线继续 ======
path.lineTo(325.w, 30.w);
// ====== 第三个圆角 (横线 → 竖线) ======
path.quadraticBezierTo(
335.w, 30.w, // 控制点
335.w, 40.w, // 终点
);
// ====== 竖线到右下角圆角起点 ======
path.lineTo(335.w, 100.w - radius);
// ====== 右下角圆角 ======
path.quadraticBezierTo(
335.w, 100.w, // 控制点
335.w - radius, 100.w, // 终点
);
// ====== 底边横线到左下角圆角前 ======
path.lineTo(radius, 100.w);
// ====== 左下角圆角 ======
path.quadraticBezierTo(
0, 100.w, // 控制点
0, 100.w - radius, // 终点
);
// ====== 左边竖线到左上角圆角起点 ======
path.lineTo(0, radius);
// ====== 左上角圆角 ======
path.quadraticBezierTo(
0, 0, // 控制点
radius, 0, // 终点
);
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
更多推荐


所有评论(0)