Liste beim Tippen filtern

In dieser Anleitung wird erläutert, wie Sie in Jetpack Compose eine Liste von Strings anhand der Texteingabe filtern. Mit diesem Ansatz können Sie eine Liste dynamisch anhand der Suchanfragen der Nutzer aktualisieren.

Versionskompatibilität

Diese Implementierung funktioniert mit Compose-Versionen ab 1.2.0.

Abhängigkeiten

Fügen Sie die folgenden Abhängigkeiten in Ihren build.gradle ein:

Liste anhand der Texteingabe filtern

Zusammengenommen erzeugen die folgenden Snippets eine Liste, die in Echtzeit aktualisiert wird, während der Nutzer tippt. In diesem Beispiel wird ein ViewModel verwendet, um die Listendaten und die Filterlogik zu speichern. Die FilterTextView()-Funktion erstellt die Benutzeroberfläche, die automatisch aktualisiert wird, wenn sich der Filtertext ändert.

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

Wichtige Punkte zum Code

• Der ViewModel-Code abstrahiert die Filterung von der Composeable-Funktion.
• Die ViewModel enthält sowohl die ursprünglichen als auch die gefilterten Listen. Es definiert eine Liste von Elementen und ein MutableStateFlow, in dem die gefilterten Elemente gespeichert werden.
• Die Funktion filterText filtert die Liste anhand des angegebenen Eingabestrings und aktualisiert den Status filteredItems, der an die Benutzeroberfläche zurückgegeben wird.

@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

Wichtige Punkte zum Code

• Zeigt ein OutlinedTextField für die Nutzereingabe und ein LazyColumn für die gefilterten Listenelemente an.
• Erfasst den filteredItems-Statusfluss vom ViewModel und wandelt ihn in ein lebenszyklusbewusstes State-Objekt um.
  • collectAsStateWithLifecycle ruft den aktuellen Wert von StateFlow ab und stellt die Benutzeroberfläche neu zusammen, wenn sich der Wert ändert.
• Mit text by rememberSaveable { mutableStateOf("") } wird eine Statusvariable text erstellt, die den aktuellen Text enthält, der im Textfeld für den Filter eingegeben wurde.
  • rememberSaveable bewahrt den Wert von Text bei Konfigurationsänderungen.
  • Mit dem Schlüsselwort by wird der Wert von „text“ an das Attribut „value“ des MutableState-Objekts delegiert.
• OutlinedTextField ruft die Funktion filterText aus dem Ansichtsmodell auf, wenn Textänderungen den onValueChange-Callback auslösen.

Ergebnis

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Nutzereingabe anfordern

Hier erfahren Sie, wie Sie Nutzern die Möglichkeit geben, durch Eingabe von Text und andere Eingabemethoden mit Ihrer App zu interagieren.

Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.

Zu den FAQs Feedback geben