Toggle

Toggle

Le composant Toggle est un contrôle qui permet à l’utilisateur de basculer entre deux états, typiquement true ou false (ou vrais/faux). Ce composant est lié à une variable d’état, permettant de réagir en temps réel aux changements initiés par l’utilisateur.

Le composant Toggle

Le composant Toggle est un contrôle qui permet à l’utilisateur de basculer entre deux états, typiquement true ou false (ou vrais/faux). Ce composant est lié à une variable d’état, permettant de réagir en temps réel aux changements initiés par l’utilisateur.

struct ToggleView: View {
    @State private var isOn = false

    var body: some View {
        Toggle("Activer les notifications", isOn: $isOn)
            .padding()
            .fontWeight(.semibold)
    }
}

Colorer un Toogle

Pour changer la couleur d’un Toogle, il suffit d’appliquer le modificateur .tint().

struct ToggleView: View {
    @State private var isOn = false
    
    var body: some View {
        VStack {
            Toggle("Activer les notifications", isOn: $isOn)
                .tint(.orange)
                .padding()
                .fontWeight(.semibold)
        }
    }
}

Customiser un Toggle

On a la possibilité de créer et de personnaliser des Toogles sur mesure grace au protocole Togglestyle

struct FluidToggleStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
                .foregroundStyle(.gray)
                .font(.headline)
            Spacer()
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(configuration.isOn ? activeGradient : inactiveGradient)
                    .frame(width: 70, height: 40)
                    .shadow(radius: 3)
                    .animation(.easeInOut(duration: 0.2), value: configuration.isOn)
                RoundedRectangle(cornerRadius: 18)
                    .fill(Color.white)
                    .frame(width: 30, height: 30)
                    .padding(configuration.isOn ? .trailing : .leading, 5)
                    .offset(x: configuration.isOn ? 15 : -15, y: 0)
                    .animation(.spring(response: 0.4, dampingFraction: 0.5, blendDuration: 0.5), value: configuration.isOn)
                    .shadow(radius: 3)
            }
            .onTapGesture { configuration.isOn.toggle() }
        }
    }

    var activeGradient: LinearGradient {
        LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .leading, endPoint: .trailing)
    }

    var inactiveGradient: LinearGradient {
        LinearGradient(gradient: Gradient(colors: [Color.red, Color.orange]), startPoint: .leading, endPoint: .trailing)
    }
}

Pour utiliser la mise en forme du Toggle il te suffit d’utiliser le modifieur .toggleStyle()

struct ToggleView: View {
    @State private var isOn = false
    
    var body: some View {
        VStack {
            Toggle("Activer les notifications", isOn: $isOn)
                .toggleStyle(FluidToggleStyle())
                         .padding()
                .fontWeight(.semibold)
        }
    }
}