'Swift UI: Center Text into Circle

I try to put a circle-shaped frame around a text view, but I just can't get it properly aligned and I can't see where the problem is. As you can see in the picture below, the text is sometimes offset to left, while it should be centred. Any ideas on how to fix it?

enter image description here

struct ContentView: View {
    let result = getDate();
    var body: some View {
        VStack {
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 5) {
                    ForEach(result, id: \.self) {
                        day in
                        Text(day.name!)
                            .frame(width: 35, height: 35, alignment: .center)
                            .padding()
                            .overlay(
                                Circle()
                                    .size(width: 35, height: 35)
                                    .offset(x: 17.5,y: 17.5)
                                    .scale(1.4)
                                    .stroke(Color.orange, lineWidth: 4)
                            )
                    }
                }
            }
        Spacer()
        }.background(Color.white)

    }
}

The circle is offset by half of the size of the frame, so its origin should be in the centre. The Text should be centered as well in .frame(width: 35, height: 35, alignment: .center).

Thanks a lot for helping! :)



Solution 1:[1]

.overlay already has size of container with Text an Circle centred in it, so it is just needed to operate with insets of circle not shifting it, like below

demo

Text(day.name!)
    .frame(width: 35, height: 35, alignment: .center)
    .padding()
    .overlay(
        Circle()
        .stroke(Color.orange, lineWidth: 4)
        .padding(6)
    )

backup

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1