Flutter CustomPaint绘制带按钮路径适配异常，求实现目标界面方案

完全可以实现截图中的界面，你当前遇到的跨设备显示不一致问题，核心原因是代码中大量使用硬编码的固定数值/不严谨的比例（比如100、250、size.width/1.6），这些值在不同屏幕尺寸、宽高比的设备上会导致路径位置偏移。

问题代码的核心问题 #

• 固定坐标适配性差：比如Offset(250, size.height - 210)中的250是固定像素值，在小屏手机上会偏右，大屏上偏左
• 弧度精度不足：用3.14代替π，计算误差会导致圆弧形状不一致
• 重绘逻辑冗余：shouldRepaint始终返回true，会不必要地频繁重绘，影响性能

修正后的实现方案 #

以下是适配跨设备的代码，核心思路是用屏幕尺寸的相对比例替代固定数值，同时优化精度和性能：

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

class LevelPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5
      ..strokeCap = StrokeCap.round; // 可选：让线条端点更圆润，贴近设计风格

    final path = Path();

    // 定义适配比例，可根据截图效果调整
    const horizontalMarginRatio = 0.15; // 左右边距占屏幕宽度的比例
    const arcRadiusRatio = 0.18; // 圆弧半径占屏幕高度的比例
    const verticalStepRatio = 0.2; // 每段路径的垂直间距比例

    // 计算适配后的基础数值
    final horizontalMargin = size.width * horizontalMarginRatio;
    final arcRadius = size.height * arcRadiusRatio;
    final verticalStep = size.height * verticalStepRatio;

    // 第一段路径：底部水平线段 + 右上圆弧
    final firstLineY = size.height - verticalStep;
    path
      ..moveTo(horizontalMargin, firstLineY)
      ..lineTo(size.width - horizontalMargin, firstLineY)
      ..arcTo(
        Rect.fromCircle(
          center: Offset(size.width - horizontalMargin - arcRadius, firstLineY - arcRadius),
          radius: arcRadius,
        ),
        -math.pi / 2,
        math.pi,
        true,
      );

    // 第二段路径：中间水平线段 + 左上圆弧
    final secondLineY = firstLineY - verticalStep;
    path
      ..moveTo(horizontalMargin, secondLineY)
      ..lineTo(size.width - horizontalMargin, secondLineY)
      ..arcTo(
        Rect.fromCircle(
          center: Offset(horizontalMargin + arcRadius, secondLineY - arcRadius),
          radius: arcRadius,
        ),
        math.pi / 2,
        math.pi,
        true,
      );

    // 第三段路径：重复第一段逻辑，向上偏移
    final thirdLineY = secondLineY - verticalStep;
    path
      ..moveTo(horizontalMargin, thirdLineY)
      ..lineTo(size.width - horizontalMargin, thirdLineY)
      ..arcTo(
        Rect.fromCircle(
          center: Offset(size.width - horizontalMargin - arcRadius, thirdLineY - arcRadius),
          radius: arcRadius,
        ),
        -math.pi / 2,
        math.pi,
        true,
      );

    // 第四段路径：顶部水平线段 + 左上短圆弧
    final fourthLineY = thirdLineY - verticalStep;
    path
      ..moveTo(horizontalMargin, fourthLineY)
      ..lineTo(size.width - horizontalMargin, fourthLineY)
      ..arcTo(
        Rect.fromCircle(
          center: Offset(horizontalMargin + arcRadius, fourthLineY - arcRadius),
          radius: arcRadius,
        ),
        math.pi / 2,
        math.pi / 2,
        true,
      );

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false; // 只有当Painter的参数变化时才重绘，优化性能
  }
}

额外优化建议 #

• 如果需要添加路径上的按钮，可以在CustomPaint的上层用Stack包裹Positioned组件，按钮的位置同样用相对比例计算（比如left: horizontalMargin, top: firstLineY - buttonSize/2），保证跨设备对齐
• 可以根据截图的实际设计，调整horizontalMarginRatio、arcRadiusRatio等比例参数，精准匹配视觉效果
• 若需要支持深色模式或动态颜色，可以把paint.color改为可传入的参数，提升组件复用性

内容的提问来源于stack exchange，提问作者Nurba Zhentaev