swiftui - 使用几何阅读器使矩形居中

Question

我正在尝试使用 GeometryReader 制作卡片视图（用于卡片游戏）。这张卡上会有 3 个形状。我正在尝试使用 GeometryReader 将这 3 个形状居中（从第一个形状矩形开始），但它不起作用。我究竟做错了什么？

这就是我想要的样子：这就是我想要的样子

以下是它的实际外观：以下是它的实际外观

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)
}
}

标签： swiftuigeometryreader

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)
    }
}