Wie füge ich Trennlinien zwischen Elementen in einem LazyColumn Jetpack Compose hinzu?

Lesezeit: 1 Minute

Camerons Benutzeravatar
Cameron

Ich habe eine LazyColumn, die so aussieht:

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(bookList) { book ->
        InProgressBookItem(book = book)
    }
}

Wie kann ich zwischen jedem Element in der Liste eine Zeile hinzufügen, ähnlich wie bei der Verwendung einer Elementdekoration im alten RecyclerView?

Benutzer-Avatar von Gabriele Mariotti
Gabriele Mariotti

Derzeit gibt es keine integrierte Möglichkeit, Teiler hinzuzufügen. Sie können jedoch einfach eine hinzufügen Divider im LazyListScope.

Etwas wie:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) {
    items(itemsList){
        Text("Item at  $it")
        Divider(color = Color.Black)
    }
}

Wenn Sie nicht möchten, dass auf das letzte Element ein folgt Dividerkönnen Sie Elementen entsprechend ihrer Indizes Trennzeichen hinzufügen:

LazyColumn(
    verticalArrangement = Arrangement.spacedBy(12.dp),
) {
    itemsIndexed(itemsList) { index, item ->

        Text("Item at index $index is $item")

        if (index < itemsList.lastIndex)
            Divider(color = Color.Black, thickness = 1.dp)
    }
}

Geben Sie hier eine Bildbeschreibung ein

  • Das war mein erster Gedanke, aber ich hatte gehofft, dass es eine elegantere/eingebautere Möglichkeit gäbe, dies zu tun. Im Moment sollte das funktionieren, danke!

    – Cameron

    17. April 2021 um 18:00 Uhr

  • Tipp: statt index < itemsList.size-1 Du kannst schreiben index < itemsList.lastIndex

    – or_dvir

    4. Okt. 2021 um 15:35 Uhr


  • Oder das Compose-Kernteam hätte einen Divider-Parameter bereitgestellt, der Composable in der LazyColumn-Funktion akzeptiert, anstatt uns zu beschissenen Problemumgehungen wie dieser zu zwingen

    – Farid

    4. Februar um 12:08

Einfach:

LazyColumn (
    verticalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(bookList) { book ->
        InProgressBookItem(book = book)
        Divider(color = Color.Black, thickness = 1.dp)
    }
}

  • Wird das nicht auch nach dem letzten Buch eine Trennlinie hinzufügen? Ich glaube, der Fragesteller wollte sie haben nur zwischen den Elementen.

    – Arthur Kasparian

    24. Okt. 2022 um 11:45 Uhr

1453150cookie-checkWie füge ich Trennlinien zwischen Elementen in einem LazyColumn Jetpack Compose hinzu?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy