Filtrer une liste pendant la saisie

Ce guide explique comment filtrer une liste de chaînes en fonction de la saisie de texte dans Jetpack Compose. Utilisez cette approche pour mettre à jour de manière dynamique une liste en fonction des requêtes de recherche des utilisateurs.

Compatibilité des versions

Cette implémentation fonctionne avec les versions 1.2.0 et ultérieures de Compose.

Dépendances

Incluez les dépendances suivantes dans votre fichier build.gradle:

Filtrer une liste en fonction du texte saisi

Ensemble, les extraits suivants génèrent une liste qui se met à jour en temps réel à mesure que l'utilisateur saisit du texte. Cet exemple utilise un ViewModel pour stocker les données de liste et la logique de filtrage, tandis que la fonction FilterTextView() crée l'UI qui se met à jour automatiquement chaque fois que le texte du filtre change.

class FilterTextViewModel : ViewModel() {
    private val items = listOf(
        "Cupcake",
        "Donut",
        "Eclair",
        "Froyo",
        "Gingerbread",
        "Honeycomb",
        "Ice Cream Sandwich"
    )

    private val _filteredItems = MutableStateFlow(items)
    var filteredItems: StateFlow<List<String>> = _filteredItems

    fun filterText(input: String) {
        // This filter returns the full items list when input is an empty string.
        _filteredItems.value = items.filter { it.contains(input, ignoreCase = true) }
    }
}
FilterText.kt

Points clés concernant le code

• Le code ViewModel éloigne le travail de filtrage du composable.
• ViewModel contient à la fois les listes d'origine et filtrées. Il définit une liste d'éléments et un MutableStateFlow pour contenir les éléments filtrés.
• La fonction filterText filtre la liste en fonction de la chaîne d'entrée fournie et met à jour l'état filteredItems, qui est renvoyé dans l'UI.

@Composable
fun FilterTextView(modifier: Modifier = Modifier, viewModel: FilterTextViewModel = viewModel()) {
    val filteredItems by viewModel.filteredItems.collectAsStateWithLifecycle()
    var text by rememberSaveable { mutableStateOf("") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(all = 10.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                text = it
                viewModel.filterText(text)
            },
            label = { Text("Filter Text") },
            modifier = Modifier.fillMaxWidth()
        )

        LazyColumn {
            items(
                count = filteredItems.size,
                key = { index -> filteredItems[index] }
            ) {
                ListItem(
                    headlineContent = { Text(filteredItems[it]) },
                    modifier = Modifier
                        .fillParentMaxWidth()
                        .padding(10.dp)
                )
            }
        }
    }
}
FilterText.kt

Points clés concernant le code

• Affiche un OutlinedTextField pour la saisie utilisateur et un LazyColumn pour afficher les éléments de liste filtrés.
• Collecte le flux d'état filteredItems à partir de ViewModel et le convertit en objet State tenant compte du cycle de vie.
  • collectAsStateWithLifecycle collecte la dernière valeur de StateFlow et recompose l'UI lorsque la valeur change.
• text by rememberSaveable { mutableStateOf("") } crée une variable d'état text pour contenir le texte actuel saisi dans le champ de texte du filtre.
  • rememberSaveable conserve la valeur du texte lors des modifications de configuration.
  • Le mot clé by délègue la valeur du texte à la propriété value de l'objet MutableState.
• OutlinedTextField appelle la fonction filterText à partir du modèle de vue lorsque les modifications de texte déclenchent le rappel onValueChange.

Résultat

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:

Demander une entrée utilisateur

Découvrez comment permettre aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres modes de saisie.

Collection de guides rapides

Vous avez des questions ou des commentaires ?

Consultez notre page des questions fréquentes et découvrez les guides rapides, ou contactez-nous pour nous faire part de vos commentaires.

Accéder aux questions fréquentes Envoyer des commentaires