效果图:

在这里插入图片描述
样式要求:白色背景右上角镂空效果,右上角白色镂空地方增加一个蓝色的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;
}

Logo

Agent 垂直技术社区,欢迎活跃、内容共建。

更多推荐