Módulo de edición de perfil

¿Cómo crear variables para la edición de perfil?

En el desarrollo de aplicaciones con interfaces gráficas, es esencial manejar variables que faciliten el almacenamiento y actualización de datos, especialmente durante la edición de perfiles. En esta lección, nos enfocaremos en la implementación de variables utilizando el property wrapper llamado @State, que nos permitirá seguir y modificar cada variable según sea necesario.

¿Qué variables necesitamos?

Para nuestra pantalla de edición de perfil, necesitamos tres variables de tipo String:

• correo: Se iniciará sin valor, es decir, como un string vacío.
• contraseña: Similar al correo, comenzará sin ningún valor asignado.
• nombre: Al igual que las anteriores, empezará vacía.

El uso del @State wrapper asegura que cualquier cambio en estos valores sea detectado y reflejado en la interfaz gráfica, mejorando la interactividad y dinamismo de nuestra aplicación.

@State var correo: String = ""
@State var contraseña: String = ""
@State var nombre: String = ""

¿Cómo crear la función para actualizar datos?

Una parte crucial de nuestro formulario es la capacidad de actualizar los datos del usuario cuando se interactúa con la interfaz. Por este motivo, creamos una función sin parámetros denominada actualizarDatos. Por ahora, esta función simplemente imprimirá un mensaje indicando que se están guardando y recuperando los datos del usuario, dejándola lista para su futura implementación.

func actualizarDatos() {
    print("Guardado o guardando y recuperando datos del usuario")
}

¿Cómo estructurar la interfaz gráfica?

Nuestra interfaz se centrará en un diseño limpio y organizado. Empezaremos envolviendo todo en un VStack con propiedades de alineación a la izquierda y un padding horizontal de 42 puntos para asegurarnos de que todo se vea correctamente alineado y espacioso.

¿Cómo diseñar los campos de texto?

Los campos de texto consistirán en un TextField para el correo y el nombre, y un SecureField para la contraseña, cada uno con su propio placeholder y validaciones para asegurar la usabilidad.

Text("Correo electrónico")
    .foregroundColor(.darkcian)
    .font(.caption)

if correo.isEmpty {
    Text("ejemplo@gmail.com")
        .foregroundColor(.gray)
        .font(.caption)
}

TextField("", text: $correo)
    .foregroundColor(.white)

Divider()
    .frame(height: 1)
    .background(Color.darkcian)

¿Cómo añadir seguridad a la contraseña?

Para asegurar que la contraseña no sea visible al ingresarla, utilizamos SecureField, mejorando así la privacidad del usuario:

SecureField("Introduce tu contraseña", text: $contraseña)
    .foregroundColor(.white)

¿Cómo añadir un botón de acción?

El botón de acción, cual es el elemento que permitirá actualizar los datos, integra un diseño ya conocido con propiedades modificadas para que coincida con los estándares visuales de la aplicación:

Button(action: {
    actualizarDatos()
}) {
    Text("Actualizar datos")
        .fontWeight(.bold)
        .foregroundColor(.white)
        .frame(maxWidth: .infinity)
        .padding(.vertical, 11)
        .background(RoundedRectangle(cornerRadius: 6)
        .stroke(Color.darkcian, lineWidth: 1))
}

Asegúrate de que cada elemento de la interfaz esté correctamente espaciado y que los colores y fuentes sean coherentes con el diseño general de la aplicación. Esto no solo mejorará la apariencia de tu aplicación, sino que también aumentará su usabilidad.

Embárcate con confianza en la programación de interfaces en Xcode y Swift, y recuerda que ajustar los detalles en la apariencia final puede marcar una gran diferencia en la presentación de tu proyecto. ¡Sigue aprendiendo y perfeccionando tus habilidades, el camino de la programación es vasto y lleno de oportunidades!