[FIXED] SwiftUI zentriert das Bild zwischen den Ansichten

Ausgabe

Ich habe einen HStack, den ich als Symbolleiste verwende. Der HStack enthält links eine Schaltfläche, ein Bild in der Mitte und dann einen weiteren HStack mit 2 Schaltflächen. Alles sieht gut aus, bis auf das Bild in der Mitte, es ist etwas links. Wie kann ich das Bild zentrieren?

var toolbar: some View {
        HStack(alignment: .center) {
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            Spacer()
            Image("nav_logo")
                .resizable()
                .frame(width: 30, height: 30)
            
            Spacer()
            optionsButton
        }
        .frame(height: 30)
    }

var optionsButton: some View {
        HStack {
            Button {
                UIPasteboard.general.string = viewModel.take.shareLinkString
                self.buildBottomAlert(type: .linkCopied)
            } label: {
                 Image("shareIcon")
            }
            .padding(.trailing, 10)
            
            Button {
                showingAlert = true
            } label: {
                Image("moreMenu")
            }
}

Lösung

Das Bild in der Mitte ist versetzt, weil die erste Schaltfläche und optionsButtonnicht die gleiche Breite haben. Aber die Spacer´s innerhalb des enthaltenden Stapels haben die gleiche Breite.

Um dies zu lösen, könnten Sie sie in einen Behälter wickeln, der groß genug ist, damit beide die gleiche Breite haben.

z.B:

//GeometryReader to get the size of the container this is in
GeometryReader{proxy in
    HStack(alignment: .center) {
        //Hstack to wrap the button
        HStack(){
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            // Spacer to move the button to the left
            Spacer()
        }
        // depending on the use case you would need to tweak this value
        .frame(width: proxy.size.width / 4)
        Spacer()
        Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
            .resizable()
            .frame(width: 30, height: 30)
        
        Spacer()
        HStack(){
            Spacer()
            optionsButton

        }
        .frame(width: proxy.size.width / 4)
    }
    .frame(height: 30)
}

Beantwortet von – burnsi

Antwort geprüft von – Cary Denson (FixError Admin)