使用几何读取器将矩形居中

Question

我正在尝试使用GeometryReader制作纸牌视图（用于纸牌游戏）。 该卡片将具有3种形状。 我正在尝试使用GeometryReader（从第一个形状，Rectangle开始）居中放置这3个形状，但是它不起作用。 我在做什么错了？

这就是我想要的样子：Here's how I want it to look like

实际上是这样的：Here's how it actually looks like

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

这里是布局的可能变体。经过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)
    }
}