使用几何 reader 使矩形居中

Question

我正在尝试使用 GeometryReader 制作卡片视图（用于纸牌游戏）。这张卡片将有 3 种形状。我正在尝试使用 GeometryReader 将这 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)
    }
}

使用几何 reader 使矩形居中

Using geometry reader to Center the Rectangle

swiftui

geometryreader