0

estoy empezando a utilizar SWIFTUI y me estoy encontrando con algún problema a la hora de querer centrar varias vistas dentro de un contenedor.

Mi intención es llegar a tener los campos con valor 1,2,3 y 4 centrados con respecto al contenedor: introducir la descripción de la imagen aquí

He intentado utilizar la siguiente opción seleccionando las 4 vistas antes: introducir la descripción de la imagen aquí

Pero queda todo apelotonado de la siguiente manera: introducir la descripción de la imagen aquí

1
  • Esto no es SwiftUI es UIKit el 12 sep. 2021 a las 21:18

2 respuestas 2

0

Intenta lo siguiente:

Tus 4 labels (1, 2, 3, 4) ponlos en un StackView horizontal Tus otros 4 textfields igual en otro StackView horizontal

Seleccionas ambos StackViews y los metes dentro de un StackView Vertical.

Ahora a ese stack vertical, asigna un constraint top y marca la casilla Horizontally in Container.


Los stacks horizontales puedes seleccionar que se llenen proporcionalmente en el inspector, de esta manera harán match cada label con cada textfield.

Espero te sirva.

0

Un ejemplo de cómo podrías montarlo:

struct ContentView: View {
    
    @State var code1: String = ""
    @State var code2: String = ""
    @State var code3: String = ""
    @State var code4: String = ""

    
    var body: some View {
        VStack(alignment: .center, spacing: 10) {
            
            Text("Please, enter the authentication code")
                .padding(.bottom, 10)
            
            HStack {
                Spacer()
                Text("1")
                    .frame(width: 30, height: 30)
                Text("2")
                    .frame(width: 30, height: 30)
                Text("3")
                    .frame(width: 30, height: 30)
                Text("4")
                    .frame(width: 30, height: 30)
                Spacer()
            }
            
            HStack {
                Spacer()
                TextField("", text: self.$code1)
                    .multilineTextAlignment(TextAlignment.center)
                    .frame(width: 30, height: 30)
                    .overlay(RoundedRectangle(cornerRadius: 5).stroke())
                TextField("", text: self.$code2)
                    .multilineTextAlignment(TextAlignment.center)
                    .frame(width: 30, height: 30)
                    .overlay(RoundedRectangle(cornerRadius: 5).stroke())
                TextField("", text: self.$code3)
                    .multilineTextAlignment(TextAlignment.center)
                    .frame(width: 30, height: 30)
                    .overlay(RoundedRectangle(cornerRadius: 5).stroke())
                TextField("", text: self.$code4)
                    .multilineTextAlignment(TextAlignment.center)
                    .frame(width: 30, height: 30)
                    .overlay(RoundedRectangle(cornerRadius: 5).stroke())
                Spacer()
            }
            
            HStack {
                Text("Back")
                    .foregroundColor(.blue)
                Spacer()
                Text("Next")
                    .foregroundColor(.blue)
            }.padding()
        }
    }
}

Así quedaría en el simulador...

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.