Utilisation du lecteur de géométrie pour centrer le rectangle

Question

J'essaie d'utiliser GeometryReader pour créer une vue de carte (à utiliser dans un jeu de cartes). Cette carte aura 3 formes dessus. J'essaie de centrer ces 3 formes à l'aide de GeometryReader (en commençant par la première forme, Rectangle), mais cela ne fonctionne pas. Qu'est-ce que je fais mal?

Voici à quoi JE VEUX qu'il ressemble: Voici à quoi je veux qu'il ressemble

Voici à quoi il ressemble RÉELLEMENT : Voici à quoi il ressemble réellement

struct Card: View {
var body: some View {
    ZStack {
        RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 3)
        VStack {
            GeometryReader { geometry in
                Rectangle()
                .size(
                    width: geometry.size.width * 0.75,
                    height: geometry.size.height * 0.75
                )
                .position(
                    x: geometry.size.width / 2,
                    y: geometry.size.height / 2
                )
            }
            GeometryReader { geometry in
                Circle()
                .size(
                    width: geometry.size.width * 0.75,
                    height: geometry.size.height * 0.75
                )
                .position(
                    x: geometry.size.width / 2,
                    y: geometry.size.height / 2
                )
            }
            GeometryReader { geometry in
                Rectangle()
                .size(
                    width: geometry.size.width * 0.75,
                    height: geometry.size.height * 0.75
                )
                .position(
                    x: geometry.size.width / 2,
                    y: geometry.size.height / 2
                )
            }
        }

    }
    .foregroundColor(Color.orange)
}
}

Answer 1

Voici une variante de mise en page possible. Testé avec Xcode 12 / iOS 14

struct Card3: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10.0).stroke(lineWidth: 3)
            GeometryReader { geometry in
                VStack {
                    Color.clear.overlay(Rectangle()
                        .frame(
                            width: geometry.size.width * 0.75,
                            height: geometry.size.height / 3 * 0.75
                        ))
                    Color.clear.overlay(Circle()
                        .frame(
                            width: geometry.size.width * 0.75,
                            height: geometry.size.height / 3 * 0.75
                        ))
                    Color.clear.overlay(Rectangle()
                        .frame(
                            width: geometry.size.width * 0.75,
                            height: geometry.size.height / 3 * 0.75
                        ))
                }.frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .foregroundColor(Color.orange)
    }
}