es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrando la superposición alineada en la parte inferior.

Quiero superponer una “Vista” sobre otra cuando toco un botón.

El siguiente es mi código:

import SwiftUI

struct SheetView: View {
    @State private var showSheet: Bool = false
    var body: some View {
        NavigationView {
            VStack {
                ZStack {
                    Rectangle()
                        .fill(Color.orange)
                        .frame(height: 32.0)
                    Button("Por favor seleccione una dirección de correo") {
                        showSheet.toggle()
                    }.foregroundColor(Color.black)
                }
                Spacer()
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationViewStyle(StackNavigationViewStyle())
        }
        .overlay(popOver)
    }

    var popOver: some View {
        Group {
            if showSheet {
                ZStack {
                    Color.black.opacity(0.4).ignoresSafeArea()
                    ZStack {
                        Rectangle()
                            .fill(Color.white)
                            //.frame(width: UIScreen.main.bounds.width, height: 400)
                            .frame(maxWidth: .infinity, maxHeight: 320.0, alignment: .bottom)
                            //.position(x: UIScreen.main.bounds.width / 2.0, y: 600)
                    }
                }.onTapGesture {
                    showSheet.toggle()
                }
            }
        }
    }
}

Y se ve como la siguiente imagen. Obtiene casi todo lo que necesito, excepto que la “Vista” superpuesta aparecerá en el centro. ¿Cómo puedo hacer que aparezca alineada en la parte inferior de la “Vista”?

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para alinear la vista superpuesta en la parte inferior de la vista inferior, puedes usar la guía de alineación .bottom. Modifica la propiedad popOver en SheetView de la siguiente manera:

    var popOver: some View {
        Group {
            if showSheet {
                ZStack(alignment: .bottom) { // especificar la alineación
                    Color.black.opacity(0.4).ignoresSafeArea()
                    ZStack {
                        Rectangle()
                            .fill(Color.white)
                            .frame(maxWidth: .infinity, maxHeight: 320.0, alignment: .bottom)
                                                    // alinear la vista del rectángulo en la parte inferior
                        // agregar aquí el contenido del popover
                    }
                }.onTapGesture {
                    showSheet.toggle()
                }
            }
        }
    }
    

Comments are closed.