Módulo de ajustes de perfil con Toggle

¿Cómo terminar de programar la interfaz gráfica de ajustes?

En el emocionante mundo del desarrollo de aplicaciones, comprender y crear interfaces de usuario atractivas es esencial para ofrecer la mejor experiencia. En esta lección, llevaremos la programación de la pantalla de perfil del usuario a otro nivel utilizando controles interactivos como Toggle y Navigation Link. Si eres un desarrollador que busca mejorar tus habilidades, sigue leyendo para conocer todos los detalles necesarios para implementar estas funcionalidades en tu proyecto.

¿Cómo implementar un Toggle en SwiftUI?

El control Toggle es extremadamente útil cuando queremos permitir que los usuarios activen o desactiven opciones. En nuestro caso, por ejemplo, servirá para manejar las notificaciones.

// Declaración de variable toggle con Property Wrapper
@State private var isToggleOn: Bool = true

// Implementación del botón con el Toggle
Button(action: {
    // Acción del Toggle
    isToggleOn.toggle()
}) {
    HStack {
        Text("Notificaciones")
        Spacer()
        Toggle("", isOn: $isToggleOn)
            .labelsHidden()
    }
    .padding()
    .background(Color("BlueGray"))
    .clipShape(RoundedRectangle(cornerRadius: 1))
}

¿Cómo crear botones con elementos adicionales?

Además del Toggle, los botones con diferentes acciones y estilos también son necesarios. Aquí te mostramos cómo implementar uno con una apariencia personalizada.

Button(action: {
    // Acción del botón cuenta
}) {
    HStack {
        Text("Cuenta")
        Spacer()
        Image(systemName: "plus")
            .foregroundColor(.white)
    }
    .padding()
    .background(Color("BlueGray"))
    .clipShape(RoundedRectangle(cornerRadius: 1))
    .padding(.horizontal, 8)
}

Este snippet crea un botón estilizado con un icono de suma a la derecha y fondo personalizado.

¿Cómo configurar Navigation Link para cambiar de pantalla?

Una de las características más poderosas de SwiftUI es la capacidad de navegar entre vistas, en este caso al editar el perfil.

// Declaración de la variable para controlar la navegación
@State private var isEditProfileViewActive: Bool = false

// Implementación de Navigation Link
Button(action: {
    isEditProfileViewActive = true
}) {
    HStack {
        Text("Editar Perfil")
        Spacer()
        Image(systemName: "chevron.right")
            .foregroundColor(.white)
    }
    .padding()
    .background(Color("BlueGray"))
    .clipShape(RoundedRectangle(cornerRadius: 1))
    .padding(.horizontal, 8)
}
.navigationLink(
    destination: EditProfileView(), 
    isActive: $isEditProfileViewActive, 
    label: { EmptyView() }
)

Esta estructura asegura que al presionar "Editar Perfil", el usuario será dirigido a una nueva pantalla, que se creará más adelante.

¿Qué reto adicional puedes asumir?

Antes de cerrar la lección, te invitamos a un pequeño desafío para mejorar aún más nuestra interfaz visual. Observa cómo los elementos dentro del módulo de enlaces no tienen la separación deseada. Intenta ajustar el espaciado entre los botones para que se asemeje más a nuestro diseño planificado. Ajustar estos detalles hará que tu aplicación se destaque aún más y te acerque a ser un maestro en el diseño de interfaces.

Continúa practicando y recuerda comprobar tus implementaciones. Con perseverancia y aprendizaje continuo, dominarás las mejores prácticas y te convertirás en un desarrollador aún más competente. ¡Buena suerte y sigue aprendiendo!