SwifUI Zstack не работает на нескольких устройствах

Question

У меня есть такой код:

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("bird")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .edgesIgnoringSafeArea(.all)
            Image(systemName: "camera.on.rectangle")
                .offset(x: 160, y: -380)
                .font(.largeTitle)
            Image(systemName: "heart")
                .offset(x: -160, y: 380)
                .font(.largeTitle)
                .foregroundColor(.red)
            Image(systemName: "square.and.arrow.up.on.square")
                .offset(x: -160, y: -380)
                .font(.largeTitle)
        }
    }
}

Я использую .offset, чтобы установить конкретное место для изображений. Но когда я перехожу на другой формат устройства, они уходят. Есть ли способ наложить ограничения или улучшить этот код для правильной работы в SwiftUI?

Благодарю.

Answer 1

В SwiftUI вы можете использовать модификатор AlignmentGuide вместе с GeometryReader для создания более гибких макетов, адаптирующихся к различным размерам устройств. Это позволяет вам определять ограничения и выравнивание для ваших представлений.

      struct ContentView: View {
    var body: some View {
        ZStack(alignment: .topLeading) {
            GeometryReader { geometry in
                Image("bird")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .edgesIgnoringSafeArea(.all)
                
                VStack {
                    Image(systemName: "camera.on.rectangle")
                        .font(.largeTitle)
                        .alignmentGuide(.topLeading) { d in d[.top] + d[.height] / 2 }
                    Spacer()
                    Image(systemName: "heart")
                        .font(.largeTitle)
                        .foregroundColor(.red)
                        .alignmentGuide(.bottomTrailing) { d in d[.bottom] - d[.height] / 2 }
                }
                
                Image(systemName: "square.and.arrow.up.on.square")
                    .font(.largeTitle)
                    .alignmentGuide(.bottomLeading) { d in d[.bottom] - d[.height] / 2 }
            }
        }
    }
}

Используя GeometryReader, вы можете получить размер доступного пространства и использовать его для расчета желаемых смещений для каждого изображения. Таким образом, изображения сохранят свое относительное положение даже при изменении формата устройства.