https://kotlinlang.org logo
#compose
Title
# compose
m

miqbaldc

11/03/2021, 1:50 AM
Unable to have interaction in Compose Preview Does it not possible to use list ADT e.g:
HashSet
as
remember { mutableStateOf(hashSetOf()) }
See video & snippet code in 🧵
Copy code
@Preview
@Composable
fun FilterChipGroupPreview() {
    // data from network
    val items = listOf("Abc", "Def", "Ghi")
    // hoist this inside activity / fragment
    val itemsSelected = remember { mutableStateOf(hashSetOf("Abc")) }

        FilterChipGroup(
            items = items,
            itemsSelected = itemsSelected.value,
            onClickChip = { clickedLabel, wasSelected ->
                // val previousLabelsSelected = itemsSelected.value
                if (itemsSelected.value.contains(clickedLabel) && !wasSelected) {
                    itemsSelected.value.remove(clickedLabel)
                } else {
                    itemsSelected.value.add(clickedLabel)
                }
                // uncomment this also doesn't work in preview, also in the emulator fails
                // but, works in real devices (see video in this thread)
                // itemsSelected.value = previousLabelsSelected
            }
        )
}
Here’s the underlying
FilterChipGroup
contents
n

Nathan Castlehow

11/03/2021, 3:04 AM
Does this work on a device? To me it looks like it may not work at all as I don't think compose will be notified when you add an item to the hashset.
Compose is notified when the value of the itemSelected mutable state is changed. In this case the value itself isn't changed (it's still the same hashset) but the contents of the hashset are different. Instead of a mutableStateOf you could use a mutableStateListOf.
m

miqbaldc

11/03/2021, 10:46 AM
I tried in the device (it works)
notice the lags, I’m not sure, does this related to the compose, or it’s just a RecyclerView doing the recycling
here’s the video demo
This is works in real devices, but not in Compose Preview & Emulator
z

Zach Klippenstein (he/him) [MOD]

11/03/2021, 10:18 PM
It might work in some cases, by accident, if something else happens to trigger a recomposition after you mutate that list, but that is definitely the wrong way to do what you’re trying to do for the reasons Nathan mentions.
Assigning a state value to itself won’t trigger recomposition since it’s the same value and change notifications only fire for changes.
Either: • Delete lines 13 and 19 and use a
mutableStateMapOf
instead of
hashSetOf
(a map can act as a set, just use the keys and ignore values) • Use an immutable set (
setOf("Abc")
) and then create a new set each time inside
onClickChip
.
today i learned 1
🙏 1
m

miqbaldc

11/04/2021, 5:14 AM
Looks like option 1 promising Will try the option 2 as well
z

Zach Klippenstein (he/him) [MOD]

11/04/2021, 4:22 PM
Just depends whether you want to have mutable or immutable data structures
1
m

miqbaldc

11/05/2021, 1:18 AM
Wants to confirm (seems there’s a typo in the previous snippet code). Does the below approach also not recommended?
Copy code
val previousLabelsSelected = itemsSelected.value
                if (previousLabelsSelected.contains(clickedLabel) && !wasSelected) {
                    previousLabelsSelected.remove(clickedLabel)
                } else {
                    previousLabelsSelected.add(clickedLabel)
                }
                itemsSelected.value = previousLabelsSelected
2 Views