Filtrowanie listy podczas pisania

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Z tego przewodnika dowiesz się, jak filtrować listę ciągów tekstowych na podstawie tekstu wprowadzanego w Jetpack Compose. Stosuj tę metodę, aby dynamicznie aktualizować listę na podstawie zapytań użytkowników.

Zgodność wersji

Ta implementacja działa z wersją Compose 1.2.0 lub nowszą.

Zależności

W pliku build.gradle uwzględnij te zależności:

Filtrowanie listy na podstawie tekstu

Połączone ze sobą fragmenty kodu tworzą listę, która jest aktualizowana w czasie rzeczywistym w miarę wpisywania przez użytkownika. W tym przykładzie do przechowywania danych listy i logiki filtrowania używana jest funkcja ViewModel, a funkcja FilterTextView() tworzy interfejs użytkownika, który aktualizuje się automatycznie po każdej zmianie tekstu filtra.

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

Najważniejsze informacje o kodzie

• Kod ViewModel abstrakcyjnie odsuwa zadania związane z filtrowaniem z komponowalnego komponentu.
• Tablica ViewModel zawiera zarówno oryginalne, jak i odfiltrowane listy. Określa listę elementów i element MutableStateFlow, który przechowuje odfiltrowane elementy.
• Funkcja filterText filtruje listę na podstawie podanego ciągu wejściowego i aktualizuje stan filteredItems, który jest przekazywany z powrotem do interfejsu użytkownika.

@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

Najważniejsze informacje o kodzie

• Wyświetla OutlinedTextField dla danych wprowadzanych przez użytkownika i LazyColumn dla elementów na przefiltrowanej liście.
• Zbiera przepływ stanów filteredItems z elementu ViewModel i przekształca go w obiekt State uwzględniający cykl życia.
  • collectAsStateWithLifecycle pobiera najnowszą wartość z StateFlow i po jej zmianie ponownie tworzy interfejs.
• text by rememberSaveable { mutableStateOf("") } tworzy zmienną stanu text, która przechowuje bieżący tekst wpisany w polu tekstowym filtra.
  • rememberSaveable zachowuje wartość tekstu podczas zmian konfiguracji.
  • Słowo kluczowe by przekazuje wartość tekstu do właściwości value obiektu MutableState.
• Funkcja OutlinedTextField wywołuje funkcję filterText z modelu widoku, gdy zmiany w tekście powodują wywołanie zwrotne onValueChange.

Wynik

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Prośba o dane użytkownika

Dowiedz się, jak wdrożyć sposoby interakcji użytkowników z aplikacją przez wpisywanie tekstu i używanie innych metod wprowadzania danych.

Kolekcja krótkich przewodników

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.

Najczęstsze pytania Prześlij opinię