SwiftUI实现多色线条及上方分数展示的UI方案求助

针对你用Path和GeometryReader开发遇到的问题，下面提供一个通用的自定义UI实现方案，核心是通过自定义Shape结合GeometryReader来绘制自适应的复杂界面：

1. 自定义Shape绘制路径 #

先定义一个Shape子类，在path(in:)方法中根据需求绘制完整的UI轮廓，这里以带右上角切角和圆角的卡片为例：

struct CustomCardShape: Shape {
    // 可配置参数：圆角半径、切角宽度
    let cornerRadius: CGFloat
    let cutWidth: CGFloat
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // 左上角圆角
        path.move(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        path.addArc(center: CGPoint(x: rect.minX + cornerRadius, y: rect.minY + cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(180),
                    endAngle: .degrees(270),
                    clockwise: false)
        
        // 顶部边 + 右上角切角
        path.addLine(to: CGPoint(x: rect.maxX - cutWidth, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY + cutWidth))
        
        // 右侧边 + 右下角圆角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY - cornerRadius))
        path.addArc(center: CGPoint(x: rect.maxX - cornerRadius, y: rect.maxY - cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(0),
                    endAngle: .degrees(90),
                    clockwise: false)
        
        // 底部边 + 左下角圆角
        path.addLine(to: CGPoint(x: rect.minX + cornerRadius, y: rect.maxY))
        path.addArc(center: CGPoint(x: rect.minX + cornerRadius, y: rect.maxY - cornerRadius),
                    radius: cornerRadius,
                    startAngle: .degrees(90),
                    endAngle: .degrees(180),
                    clockwise: false)
        
        // 左侧边回到起点
        path.addLine(to: CGPoint(x: rect.minX, y: rect.minY + cornerRadius))
        
        return path
    }
}

2. 结合GeometryReader实现自适应布局 #

使用GeometryReader获取父视图的可用尺寸，让自定义Shape能自适应屏幕大小，同时在形状内部叠加内容：

struct CustomCardView: View {
    var body: some View {
        GeometryReader { geo in
            CustomCardShape(cornerRadius: 16, cutWidth: 32)
                .fill(Color.white)
                .shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
                // 根据父视图尺寸比例设置大小
                .frame(width: geo.size.width * 0.9, height: geo.size.height * 0.6)
                .overlay(
                    // 内部内容布局
                    VStack(alignment: .leading, spacing: 12) {
                        Text("自定义UI示例")
                            .font(.title)
                            .fontWeight(.bold)
                        Text("使用Shape和GeometryReader实现自适应的自定义界面")
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                        Spacer()
                        Button(action: {}) {
                            Text("操作按钮")
                                .foregroundColor(.white)
                                .padding(.vertical, 8)
                                .padding(.horizontal, 24)
                                .background(Color.blue)
                                .cornerRadius(8)
                        }
                    }
                    .padding(24)
                )
        }
        .padding()
    }
}

关键调整说明 #

• 如果你的目标UI是其他样式（比如波浪边、不规则多边形、特殊边角），只需要修改CustomCardShape中的路径绘制逻辑：
  • 用addCurve/addQuadCurve绘制贝塞尔曲线实现波浪或弧形边缘
  • 调整addArc的参数修改圆角位置和大小
  • 添加更多addLine点来构建多边形轮廓
• GeometryReader的核心作用是获取父视图的尺寸，让自定义Shape的大小能随屏幕自适应，避免固定尺寸导致的适配问题。

内容的提问来源于stack exchange，提问作者KARAN _186