Recrie Conquistas Apple Game Center

Uma solução SwiftUI para texto curvo pode ser encontrada na resposta para SwiftUI: Como ter espaçamento igual entre letras em uma visualização de texto curvo? (foi minha resposta). Na verdade, parece que você já encontrou esta postagem porque sua própria resposta aqui parece ser baseada no código naquela pergunta (ou nas perguntas de acompanhamento do mesmo OP). Mas você não está usando CurvedTextem sua resposta.

O restante do emblema pode ser construído com um ZStack.

• Para criar o espaço no círculo onde o título é mostrado, use .trimpara encurtar o caminho e, em seguida, .rotationEffectmova o espaço para a posição de 12 horas.

• O tamanho do vão é a única parte um pouco complicada. Se você não gosta de usar uma fração de arco fixa, você pode tentar usar uma aproximação do ângulo com base no tamanho do rótulo, ou você precisa obter o ângulo de arco real do texto.

• O ângulo do arco é conhecido dentro da view CurvedText, então você pode querer considerar adaptar essa view. Veja Como determinar o ângulo do primeiro caractere em uma view de texto curva no SwiftUI? para um exemplo de onde uma adaptação semelhante está sendo usada.

• Por fim, o texto curvo pode ser adicionado ao ZStackcomo uma sobreposição. Dessa forma, não afeta o tamanho do ZStack.

ZStack {
    Circle()
        .trim(from: 0.1, to: 0.9)
        .stroke(style: .init(lineWidth: 6, lineCap: .round))
        .rotationEffect(.degrees(-90))
        .padding(10)

    Image(.image3)
        .resizable()
        .scaledToFill()
        .clipShape(.circle)
        .padding(40)

    Circle()
        .stroke(lineWidth: 6)
        .padding(40)
}
.frame(width: 300, height: 300)
.overlay(alignment: .top) {

    // See https://stackoverflow.com/a/77280669/20386264
    CurvedText(string: "March 4 2025", radius: 140)
        .font(.title3)
        .fontWeight(.medium)
}

Para criar uma visualização circular de conquistas semelhante à vista no Apple Game Center, com texto circular na parte superior e um título de wrapper em arco centralizado, você pode usar o SwiftUI para criar uma visualização personalizada.

Crie a Visualização de Texto Circular

Veja a resposta @Benzy Neez: CurvedText

struct AchievementCircularView: View {
    @State private var notchLenght: CGSize = .zero

    var title: String

    var body: some View {
        GeometryReader { geometry in
            let size = geometry.size
            
            ZStack {
                ArcShape(
                    //startAngle: .degrees(0),
                    length: notchLenght.width,
                    lineWidth: notchLenght.height,
                    gap: 8
                )
                .stroke(Color.black, style: StrokeStyle(lineWidth: 3, lineCap: .round))
                .rotationEffect(.degrees(-90))
            }
            .frame(width: size.width, height: size.height)
            .overlay(alignment: .top) {
                CurvedText(text: title, radius: (size.width / 2))
                    .onGeometryChange(for: CGSize.self) { proxy in
                        proxy.size
                    } action: { size in
                        notchLenght = size
                    }
            }

        }
    }
    ...

Crie o título do Arc Wrapper

Dependendo do tamanho do texto, será desenhado um arco com o entalhe necessário para exibir o texto.

private struct ArcShape: Shape {
    var length: CGFloat // Length of the arc
    var lineWidth: CGFloat
    var gap: CGFloat = 0 // Gap to add leading and trailing spaces
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        // Adjust the radius to account for the line width
        let radius = min(rect.width, rect.height) / 2 - lineWidth / 2
        let center = CGPoint(x: rect.midX, y: rect.midY)
        
        let arcAngle = radius == 0 ? 0 : (length / radius)
        let startAngle = -(arcAngle / 2)
        
        // Calculate the circumference and angle ratio
        let circumference = 2 * .pi * radius // Circumference of the circle
        let angleRatio = length / circumference // Ratio of the length to the circumference
        
        // Adjust the startAngle and endAngle to account for the gap
        let gapAngle = Angle.radians(-(gap / circumference) * 2 * .pi)
        let adjustedStartAngle = Angle.radians(startAngle) + gapAngle
        let adjustedEndAngle = Angle.radians(startAngle) + .radians(angleRatio * 2 * .pi) - gapAngle
        
        // Draw the arc
        path.addArc(
            center: center,
            radius: radius,
            startAngle: adjustedStartAngle,
            endAngle: adjustedEndAngle,
            clockwise: true
        )
        
        return path
    }
}

Use a Visualização de Conquista Circular

Agora você pode usar o AchievementCircularView.

let today = Date().formatted(.dateTime.day().month(.wide).year())

AchievementCircularView(title: today)
    .font(.system(size: 13, design: .monospaced))
    .frame(width: 200, height: 200)
    //.border(.red)
    .background {
        Image("archivement_1")
            .resizable()
             .scaledToFill()
             .clipShape(.circle)
            .overlay {
                Circle()
                    .stroke(.black, lineWidth: 3)
            }
            .padding(40)
    }