SwiftUI : Interface de Recherche en Français

Introduction à l'interface de recherche

Créer une interface de recherche dans SwiftUI est un processus relativement simple grâce au modificateur de vue .searchable(). Ce modificateur peut être appliqué soit à une NavigationSplitView, soit à une NavigationStack, ou même à une vue qui y est incluse.

Syntaxe

La syntaxe de .searchable() est la suivante :

NavigationSplitView ou NavigationStack
    .searchable(
        text: variable de liaison pour le texte à rechercher,
        placement: position (optionnel),
        prompt: texte d'invite (optionnel)
    )

La propriété placement peut être définie avec les types suivants :

• .automatic : Cela place automatiquement la boîte de recherche (valeur par défaut).
• .sidebar : Cela place la boîte de recherche dans la barre latérale.
• .toolbar : Cela place la boîte de recherche dans la barre d'outils.

Le paramètre prompt représente le texte d'invite qui apparaît dans la boîte de recherche. Si aucun paramètre d’invite n’est fourni, le texte par défaut affiché est « Search ».

Exemple d'implémentation

Dans cet exemple, nous allons construire une interface de recherche simple. Nous allons déclarer deux variables :
1. Une chaîne vide nommée searchText pour stocker le texte de recherche.
2. Un tableau appelé plants contenant des noms de plantes à utiliser pour la recherche.

Chaque fois que le texte dans la boîte de recherche est mis à jour, searchText l'est également, en raison du paramètre de texte de .searchable(), $searchText. Le code à l’intérieur de la List vérifie si une plante doit être affichée en fonction de la valeur de searchText.

import SwiftUI

struct SearchBoxListView: View {
    @State private var searchText = ""
    let plants = ["Birch", "Daffodil", "Daisy", "Dandylion", "Fir", "Lily", "Oak", "Olive", "Rose", "Tulip"]

    var body: some View {
        NavigationStack {
            List(plants, id: \.self) { plant in
                if searchText.isEmpty || plant.contains(searchText) {
                    Text(plant)
                }
            }
            .navigationTitle("Plantes 🌷🌱")
        }
        .searchable(
            text: $searchText,
            prompt: "Quelle plante recherchez-vous ?"
        )
    }
}

À son lancement, cette interface affichera la liste des plantes. En entrant du texte dans la boîte de recherche, la liste sera filtrée pour n'afficher que les plantes correspondant à la requête.

Application dans la création de sites web et de startups

La création d'une interface de recherche efficace est cruciale pour de nombreux projets web et startups. Implementer une fonctionnalité de recherche dans une application iOS avec SwiftUI peut grandement améliorer l'expérience utilisateur. Une interface de recherche bien conçue permet aux utilisateurs de trouver rapidement les informations dont ils ont besoin, ce qui peut réduire le taux de rebond et augmenter l'engagement des utilisateurs.

En utilisant le modificateur .searchable(), vous pouvez facilement intégrer cette fonctionnalité dans vos projets iOS. Pensez à enregistrer les termes de recherche des utilisateurs pour personnaliser leurs futures expériences ou à coupler votre interface de recherche avec des bases de données pour afficher des résultats en temps réel. En combinant ces techniques, vous pouvez transformer une simple application en un outil précieux, attirant davantage d'utilisateurs vers votre site ou vos services.