Início / coding / Perguntas / 78168928
Accepted
soleil
Asked: 2024-03-16 02:17:18 +0800 CST

Alinhamento de sobreposição SwiftUI para centralização horizontal

  • 772

Preciso que a visualização A esteja centralizada na tela (vertical e horizontalmente). Preciso que a visualização B apareça 30px abaixo da visualização A, também centralizada horizontalmente. Mas A deve permanecer no centro da tela, sem se mover para cima quando B for adicionado. Posso realizar a maior parte disso usando .overlaye GeometryReader:

struct ContentView: View {
        
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(.red)
                    .frame(width: 200, height: 100)
                    .overlay {
                        GeometryReader {geo in
                            Rectangle()
                                .fill(.blue)
                                .frame(width: 100, height: 100)
                                .offset(y: geo.size.height + 30)
                        }
                    }
            }
        }
    }
}

insira a descrição da imagem aqui

Não sei como centralizar o retângulo azul horizontalmente. Não sei necessariamente sua largura, embora esteja especificada aqui para fins visuais. Supondo que não conheço os valores exatos dos quadros para nenhuma das visualizações, como posso posicionar B 30px abaixo de A enquanto mantenho A no centro da tela? E existe uma estrutura de visualização melhor para fazer isso?

swiftui

2 respostas

  1. Best Answer

    Você poderia simplesmente usar a VStackcom uma cópia oculta do retângulo azul acima do vermelho:

    struct ContentView: View {
    
    private var blueRectangle: some View {
        Rectangle()
            .fill(.blue)
            .frame(width: 100, height: 100)
    }
    
    var body: some View {
        VStack(spacing: 30) {
            blueRectangle.hidden()
            Rectangle()
                .fill(.red)
                .frame(width: 200, height: 100)
            blueRectangle
        }
    }
}

    Captura de tela

    Como alternativa, se não se espera que o retângulo azul seja mais largo que o vermelho, veja como você pode fazer isso com uma sobreposição:

    var body: some View {
    Rectangle()
        .fill(.red)
        .frame(width: 200, height: 100)
        .overlay(alignment: .top) {
            GeometryReader { proxy in
                blueRectangle
                    .frame(maxWidth: proxy.size.width)
                    .fixedSize(horizontal: false, vertical: true)
                    .offset(y: proxy.size.height + 30)
            }
        }
}
    • 1

  2. Às vezes parece bastante óbvio, mas o retângulo vermelho é centralizado verticalmente usando .alignmentGuide(.center), enquanto o retângulo azul é alinhado abaixo dele calculando sua posição vertical em relação ao red rectangle's height + 30-pixel offset. Ambos os retângulos herdam a centralização horizontal dentro do ZStack, garantindo que permaneçam centralizados na tela conforme abaixo

    struct ContentView: View {
    var body: some View {
        VStack {
            ZStack {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 100)
                    .alignmentGuide(.center) { _ in
                        0
                    }
                    .overlay {
                        GeometryReader { geo in
                            Rectangle()
                                .fill(Color.blue)
                                .frame(width: 100, height: 100)
                                .alignmentGuide(.center) { _ in
                                    geo.size.height + 30
                                }
                        }
                    }
            }
        }
    }
}
    • 0

relate perguntas