Filtrare un elenco durante la digitazione

Questa guida spiega come filtrare un elenco di stringhe in base all'input di testo in Jetpack Compose. Utilizza questo approccio per aggiornare dinamicamente un elenco in base alle query di ricerca degli utenti.

Compatibilità delle versioni

Questa implementazione è compatibile con Compose 1.2.0 e versioni successive.

Dipendenze

Includi le seguenti dipendenze in build.gradle:

Filtrare un elenco in base all'input di testo

I seguenti snippet, se combinati, generano un elenco che si aggiorna in tempo reale in base ai tipi di utenti. Questo esempio utilizza un ViewModel per contenere i dati dell'elenco e la logica di filtro, mentre la funzione FilterTextView() crea l'interfaccia utente che si aggiorna automaticamente ogni volta che il testo del filtro cambia.

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

Punti chiave del codice

  • Il codice ViewModel esegue l'astrazione del lavoro di filtro dal composable.
  • ViewModel contiene sia gli elenchi originali che quelli filtrati. Definisce un elenco di elementi e un MutableStateFlow per contenere gli elementi filtrati.
  • La funzione filterText filtra l'elenco in base alla stringa di input fornita e aggiorna lo stato filteredItems, che viene passato nuovamente all'interfaccia utente.

@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

Punti chiave del codice

  • Mostra un OutlinedTextField per l'input dell'utente e un LazyColumn per visualizzare gli elementi dell'elenco filtrato.
  • Raccoglie il flusso di stato filteredItems da ViewModel e lo converte in un oggetto State consapevole del ciclo di vita.
  • text by rememberSaveable { mutableStateOf("") } crea una variabile di stato text per contenere il testo corrente inserito nel campo di testo del filtro.
    • rememberSaveable mantiene il valore del testo durante le modifiche alla configurazione.
    • La parola chiave by delega il valore del testo alla proprietà value dell'oggetto MutableState.
  • OutlinedTextField chiama la funzione filterText dal modello di visualizzazione quando le modifiche al testo attivano il callback onValueChange.

Risultato

Figura 1. Un elenco filtrato che si aggiorna man mano che viene inserito nuovo testo.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri metodi di inserimento.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback