SwiftUI绘制带中心文字的文件图标求助：自定义Shape效果不符预期

云原生阿岚

2026-8-20

修正SwiftUI文件图标Shape绘制问题

你需要实现中心带有“File”文字的文件图标，但当前自定义File Shape绘制的图形不符合预期，以下是修正后的解决方案：

问题分析

原代码的路径存在几个关键问题：

重复添加了到bottomdx的无效线条
路径未闭合，导致形状不完整
顶点坐标计算不合理，折角位置和比例失调

修正后的代码

import SwiftUI
import CoreGraphics

struct File: Shape {
    func path(in rect: CGRect) -> Path {
        // 定义折角高度比例，让图标比例更协调
        let cornerHeight = rect.height * 0.25
        // 基于传入的rect定义所有顶点坐标，适配不同尺寸
        let bottomRight = CGPoint(x: rect.maxX, y: rect.maxY)
        let bottomLeft = CGPoint(x: rect.minX, y: rect.maxY)
        let topLeft = CGPoint(x: rect.minX, y: rect.minY)
        let topCorner = CGPoint(x: rect.maxX - cornerHeight, y: rect.minY)
        let topRight = CGPoint(x: rect.maxX, y: rect.minY + cornerHeight)
        
        var path = Path()
        path.move(to: bottomRight)
        path.addLine(to: bottomLeft)
        path.addLine(to: topLeft)
        path.addLine(to: topCorner)
        path.addLine(to: topRight)
        path.addLine(to: bottomRight) // 闭合路径，确保填充完整
        return path
    }
}

struct ContentView: View {
    var body: some View {
        ZStack {
            File()
                .fill(Color.black)
                .frame(width: 200, height: 250) // 可按需调整图标尺寸
            Text("File")
                .font(.largeTitle)
                .foregroundColor(.white)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}