Flutter中CustomPainter与Stack的响应式设计问题

我正在尝试实现右下角带尖角的UI组件，用CustomPainter绘制背景，通过Stack叠加文本内容，但当前实现不具备响应式特性，部分设备上文本位置不符合预期，求修复方案。

当前Widget代码：

Stack(
    alignment: widget.alignment,
    children: [
      CustomPaint(
        size: Size(context.width, ((context.width) * 0.58).toDouble()),
        painter: widget.painterWidget ,
      ),
    Padding(
          padding: EdgeInsets.only(
            right: 8.0,
            left: 8.0,
          ),
          child: SizedBox(
            width: context.width,
            child: Column(
....

CustomPainter代码：

class NotificationCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// Layer 1

Paint paint_fill_0 = Paint()
  ..color = const Color.fromARGB(255, 255, 255, 255)
  ..style = PaintingStyle.fill
  ..strokeWidth = size.width * 0.00
  ..strokeCap = StrokeCap.butt
  ..strokeJoin = StrokeJoin.miter;

Path path_0 = Path();
path_0.moveTo(size.width * 0.9608333, size.height * 0.0714286);
path_0.quadraticBezierTo(
    size.width * 0.9980167, size.height * 0.0702571, size.width * 1.0025000, size.height * 0.1414286);
path_0.cubicTo(size.width * 1.0020833, size.height * 0.2489286, size.width * 1.0017917,
    size.height * 0.5629000, size.width * 1.0013750, size.height * 0.6704000);
path_0.quadraticBezierTo(
    size.width * 1.0005583, size.height * 0.7403286, size.width * 0.9597083, size.height * 0.7454000);
path_0.quadraticBezierTo(
    size.width * 0.2732333, size.height * 0.7409286, size.width * 0.0432333, size.height * 0.7409286);
path_0.quadraticBezierTo(
    size.width * 0.0030750, size.height * 0.7389714, size.width * -0.0011833, size.height * 0.6743571);
path_0.quadraticBezierTo(
    size.width * 0.0008833, size.height * 0.2457071, size.width * 0.0009000, size.height * 0.1366571);
path_0.quadraticBezierTo(
    size.width * -0.0007333, size.height * 0.0698000, size.width * 0.0441667, size.height * 0.0700000);
path_0.lineTo(size.width * 0.0516167, size.height * 0.0029429);
path_0.lineTo(size.width * 0.0800000, size.height * 0.0677000);

canvas.drawPath(path_0, paint_fill_0);
}

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

修复方案 #

1. 让CustomPainter自适应父容器约束 #

不要硬写固定尺寸，通过LayoutBuilder获取父容器的约束，让背景尺寸基于可用空间动态计算，避免依赖全局context.width。

2. 文本内边距改用相对值 #

固定8.0的内边距在不同尺寸设备上占比差异大，改用父容器尺寸的百分比作为内边距，确保文本与背景边框的相对距离一致。

3. 修正CustomPainter路径的越界问题 #

原路径中出现负坐标值，会导致背景超出父容器范围，调整控制点确保所有坐标都在0到size.width/size.height范围内。

4. 优化重绘逻辑 #

将shouldRepaint返回值改为false，只有当样式参数变化时才触发重绘，提升性能。

完整修改后的代码示例 #

Widget部分 #

LayoutBuilder(
  builder: (context, constraints) {
    final bgHeight = constraints.maxWidth * 0.58;
    return Stack(
      alignment: widget.alignment,
      children: [
        CustomPaint(
          size: Size(constraints.maxWidth, bgHeight),
          painter: NotificationCustomPainter(),
        ),
        Padding(
          padding: EdgeInsets.symmetric(
            horizontal: constraints.maxWidth * 0.02, // 基于宽度的2%作为左右内边距
            vertical: bgHeight * 0.05, // 基于高度的5%作为上下内边距
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("通知标题", style: TextStyle(fontSize: constraints.maxWidth * 0.045)),
              SizedBox(height: bgHeight * 0.03),
              Text("通知内容描述", style: TextStyle(fontSize: constraints.maxWidth * 0.035)),
              // 其他文本组件
            ],
          ),
        ),
      ],
    );
  },
)

CustomPainter部分 #

class NotificationCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint_fill_0 = Paint()
      ..color = const Color.fromARGB(255, 255, 255, 255)
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;

    Path path_0 = Path();
    path_0.moveTo(size.width * 0.9608333, size.height * 0.0714286);
    path_0.quadraticBezierTo(
        size.width * 0.9980167, size.height * 0.0702571, size.width * 1.00, size.height * 0.1414286);
    path_0.cubicTo(size.width * 1.00, size.height * 0.2489286, size.width * 1.00,
        size.height * 0.5629000, size.width * 1.00, size.height * 0.6704000);
    path_0.quadraticBezierTo(
        size.width * 1.00, size.height * 0.7403286, size.width * 0.9597083, size.height * 0.7454000);
    path_0.quadraticBezierTo(
        size.width * 0.2732333, size.height * 0.7409286, size.width * 0.0432333, size.height * 0.7409286);
    path_0.quadraticBezierTo(
        size.width * 0.0030750, size.height * 0.7389714, size.width * 0.00, size.height * 0.6743571);
    path_0.quadraticBezierTo(
        size.width * 0.0008833, size.height * 0.2457071, size.width * 0.0009000, size.height * 0.1366571);
    path_0.quadraticBezierTo(
        size.width * 0.00, size.height * 0.0698000, size.width * 0.0441667, size.height * 0.0700000);
    path_0.lineTo(size.width * 0.0516167, size.height * 0.0029429);
    path_0.lineTo(size.width * 0.0800000, size.height * 0.0677000);

    canvas.drawPath(path_0, paint_fill_0);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 仅当样式参数变化时重绘
  }
}

内容的提问来源于stack exchange，提问作者Ardeshir ojan