Use item keys in non-lazy Column

Question

LazyColumn has item keys, in order to tie the item's state to a unique identifier rather than the list index. Is there a way to use item keys in a non-lazy list like this one?

Column {
  for (item in list) {
    Text(item)
  }
}

The reason I ask is because I want to implement SwipeToDismiss to delete items from a list, which only works if you pass a key to a LazyColumn (solution), but my list of dismissable items is nested inside of a LazyColumn, and I can't nest a LazyColumn inside of another LazyColumn's itemContent block (Nesting scrollable in the same direction layouts is not allowed):

val items = listOf<String>(...)
val groups = items.groupBy { it.first() }

LazyColumn {
  items(groups, { /* key */ }) { (firstChar, group) ->
    // not allowed!
    LazyColumn {
      items(group, { /* key */ }) { item ->
        Text(item)
      }
    }
  }
}

I could wrap the items() call itself in a for loop like this:

val items = listOf<String>(...)
val groups = items.groupBy { it.first() }

LazyColumn {
  groups.forEach { (firstChar, group) ->
    items(group, { /* key */ }) { item ->
      Text(item)
    }
  }
}

But then state in each of the outer loop's items would be keyed against its index. And I need to provide item keys for groups as well, in order to preserve their state on position changes.

chuckj · Accepted Answer · 2021-12-01 22:10:38Z

20

The general pattern for this is,

for (item in items) {
  key(item) {
    ... // use item
  }
}

The key composable is special and Compose will use item as a key to detect when the state should move when an the value of item moves in the items collection.

answered Dec 1, 2021 at 22:10

chuckj

29.8k7 gold badges57 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben987654 Over a year ago

Unrelated to this specific question, but this is the answer to a problem I had where removal of items in a custom layout would suddenly use the wrong remember animation values if I removed a repeated composable. I figured out it was getting confused and probably needed a key like lazy columns! Thank you!

Collectives™ on Stack Overflow

Use item keys in non-lazy Column

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related