Schaltfläche zum Aktivieren des Snap-Scrollings erstellen

Sie können eine Schaltfläche anzeigen, mit der Nutzer direkt zu einem bestimmten Punkt in einer Liste scrollen können. So sparen Sie Zeit und steigern die Nutzerinteraktion.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Schaltfläche zum Aktivieren des Snap-Scrollings erstellen

Mit dem folgenden Code können Sie eine Schaltfläche für ein flüssiges Snap-Scrolling in einer vertikalen Lazy-List mit 10 Elementen erstellen:

@Composable
fun MessageList(modifier: Modifier = Modifier) {
    val listState = rememberLazyListState()
    val coroutineScope = rememberCoroutineScope()

    LazyColumn(state = listState, modifier = Modifier.height(120.dp)) {
        items(10) { index ->
            Text(
                modifier = Modifier.height(40.dp),
                text = "Item $index"
            )
        }
    }

    Button(onClick = {
        coroutineScope.launch {
            listState.animateScrollToItem(index = 0)
        }
    }) {
        Text(text = "Go top")
    }
}
LazyListSnippets.kt

Wichtige Punkte zum Code

  • Verwendet das Objekt listState, um den Scrollstatus von LazyColumn an der ausgewählten Position zu speichern.
  • Startet eine Coroutine, um listState.animateScrollToItem aufzurufen, wodurch zum indexierten Element gescrollt wird, während die Scrollaktion animiert wird.

Ergebnisse

Eine vertikal scrollbare Liste mit einer aktiven Schaltfläche
Abbildung 1: Eine vertikal scrollbare Liste mit einer Snap-Scroll-Schaltfläche.

Sammlungen, die diesen Leitfaden enthalten

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

Mit Listen und Rastern können Sie Sammlungen in Ihrer App in einer visuell ansprechenden und für Nutzer leicht verständlichen Form präsentieren.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen
In dieser Videoreihe werden verschiedene Compose APIs vorgestellt. Sie erhalten einen schnellen Überblick über die verfügbaren APIs und ihre Verwendung.
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