Блог

Я пытаюсь использовать GeometryReader для создания представления карты (для использования в карточной игре). На этой карточке будет 3 фигуры. Я пытаюсь центрировать эти 3 фигуры с помощью GeometryReader (начиная с первой фигуры, прямоугольника), но это не работает. Что я делаю не так?

Вот как я ХОЧУ, чтобы это выглядело: вот как я хочу, чтобы это выглядело

Вот как это выглядит на самом деле: вот как это выглядит на самом деле

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

Здесь возможен вариант компоновки. Протестировано с 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)
    }
}