是否为 LazyColumn Key 缓存了 rememberDismissState？

Question

I have composable

fun ShowProduct(name: String, image: String, onDismissed: () -> Unit) {
    var state = rememberDismissState();

    if (state.isDismissed(DismissDirection.EndToStart)) {
        onDismissed()
    }

    SwipeToDismiss(
        state = state,
        background = { ShowSwipableActions(name) },
        modifier = Modifier
            .padding(10.dp, 10.dp)
            .height(75.dp),
        directions = setOf(DismissDirection.EndToStart),
        dismissThresholds = { _ -> FractionalThreshold(0.5f) }
    ) {
        /* Content */
    }
}

Which is rendered like this

@Composable
fun ProductsScreen(vm: ProductsListViewModel = ProductsListViewModel()){
    ShowList(
        vm.products,
        { x -> vm.removeProduct(x) },
        vm.isLoadingProducts.value,
        {
            vm.refresh()
        }
    )
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ShowList(
    products: List<Product>,
    onDismissed: (productId: String) -> Unit,
    refreshing: Boolean,
    onRefreshRequested: () -> Unit
) {
    val haptic = LocalHapticFeedback.current

    PullToRefreshCompose(
        refreshing,
        onRefreshRequested = onRefreshRequested,
        onRefreshDistanceReached = {
            haptic.performHapticFeedback(HapticFeedbackType.LongPress)
        }) {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            items(items = products, key = { product -> product.id }) { product ->
                ShowProduct(
                    product.name,
                    product.image,
                    onDismissed = { onDismissed.invoke(product.id) });
            }
        }
    }

}

ViewModel:

class ProductsListViewModel() : ViewModel() {
    private var _products = mutableStateListOf<Product>()
    val products: List<Product>
        get() = _products

    var isLoadingProducts = mutableStateOf(false);

    fun removeProduct(id: String) {
        _products.removeIf { x -> x.id == id }
    }

    fun refresh() {
            isLoadingProducts.value = true

            if(_products.any()){
                _products.clear()
            }

            for (i in 0..50) {
                _products.add(
                    Product(
                        i.toString(),
                        "Product $i",
                        "*image url*"
                    )
                );
            }

            isLoadingProducts.value = false
    }
}

If I dismiss an item and then call the refresh() function in my ViewModel, the dismissed keys will be displayed already in the dismissed state. Should I use completely unique keys for the entire lifetime of LazyColumn if I delete and add the same item?

For example

i.toString() + System.currentTimeMillis()

Answer 1

Since your posted code is incomplete, I just assumed some parts of it, and when I filled the missing parts, I only created 2 items instead of 50 as I can't differentiate every red Box that I created with that many items. What I encountered was a crash, based on the GIF showing the actions being done. After swipe-deleting the 2 items and clicking the "Refresh" button, it crashes with the stacktrace below.

E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.example.stackoverflowcomposeproject, PID: 24991
    java.lang.IndexOutOfBoundsException: Index 1, size 1
        at androidx.compose.foundation.lazy.layout.MutableIntervalList.checkIndexBounds(IntervalList.kt:177)
        at androidx.compose.foundation.lazy.layout.MutableIntervalList.get(IntervalList.kt:160)
        at androidx.compose.foundation.lazy.layout.DefaultLazyLayoutItemsProvider.getKey(LazyLayoutItemProvider.kt:236)

The issue was coming from here

if (state.isDismissed(DismissDirection.EndToStart)) {
    onDismissed()
}

It seems like when you clear the SnapshotStateList and add another set of items, the moment the first item is added and the LazyColumn has performed an update, the onDismissed() is being called which also calls the remove function in your ViewModel immediately with the previous state and it always refers to the last item removed. In my attempt when the size was 2 , I get an Index 1 out of bounds, when the size is 3 I'm getting an Index 2 out of bounds and so on..

It may seem weird at first as everyone might expect that rememberDismissState will create a new state when your ShowList re-composes, but if you dig it a little bit, you'll see its API as a rememberSaveable{…} and AFAIK , it survives re-composition.

@Composable
@ExperimentalMaterialApi
fun rememberDismissState(
    initialValue: DismissValue = Default,
    confirmStateChange: (DismissValue) -> Boolean = { true }
): DismissState {
    return rememberSaveable(saver = DismissState.Saver(confirmStateChange)) {
        DismissState(initialValue, confirmStateChange)
    }
}

The fix on my encountered issue , is just to create a remembered{..} DismissState . (Note I'm not sure if there would be any other repercussions doing this aside from not surviving config changes such as screen rotation, but it solves the crash I encountered, might also solve yours)

val state = remember {
      DismissState(
         initialValue = DismissValue.Default
      )
}

Another thing I did is (not a fix but maybe an optimization) is I wrapped your dismissState function calls inside a derivedStateOf , because not doing so(like yours) will execute multiple re-compositions on its enclosing composable

val isDismissed by remember {
     derivedStateOf {
          state.isDismissed(DismissDirection.EndToStart)
     }
}

// used like this
if (isDismissed) {
    onDismissed()
}

And these are your modified components (all codes you posted).

// your Data class that I assumed
data class Product(
    val id : String,
    val name: String
)

// your Screen where I removed unnecessary codes to reproduce the issue
@Composable
fun ProductsScreen(vm: ProductsListViewModel = ProductsListViewModel()){
    ShowList(
        vm,
        { x -> vm.removeProduct(x) },
        { vm.refresh() }
    )
}

// your ViewModel where I removed unnecessary codes to reproduce the issue
class ProductsListViewModel : ViewModel() {

     var products = mutableStateListOf<Product>()

    fun removeProduct(id: String) {
        products.removeIf { x -> x.id == id }
    }

    fun refresh() {

        if(products.any()) {
            products.clear()
        }

        for (i in 0..1) {
            products.add(
                Product(
                    i.toString(),
                    "Product $i"
                )
            )
        }
    }
}

// your ShowProduct where I removed unnecessary codes to reproduce the issue
// added swipe back background and a red rectangular box to see an item
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ShowProduct(
    onDismissed: () -> Unit
) {

    val state = remember {
        DismissState(
            initialValue = DismissValue.Default
        )
    }

    val isDismissed by remember {
        derivedStateOf {
            state.isDismissed(DismissDirection.EndToStart)
        }
    }

    if (isDismissed) {
        onDismissed()
    }

    SwipeToDismiss(
        state = state,
        background = {
            Text("SomeSwipeContent")
        },
        modifier = Modifier
            .padding(10.dp, 10.dp)
            .height(75.dp),
        directions = setOf(DismissDirection.EndToStart),
        dismissThresholds = { _ -> FractionalThreshold(0.5f) }
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp)
                .background(Color.Red)
        )
    }
}


// your ShowList where I removed unnecessary codes to reproduce the issue
// and added a button to make it work
@Composable
fun ShowList(
    viewModel: ProductsListViewModel,
    onDismissed: (String) -> Unit,
    onRefreshRequested: () -> Unit
) {

    Column {

        Button(onClick = { onRefreshRequested() }) {
            Text("Refresh")
        }

        LazyColumn(
            modifier = Modifier.fillMaxSize()) {
            items(items = viewModel.products, key = { product -> product.id } ) { product ->

                ShowProduct(
                    onDismissed = {
                        onDismissed(product.id)
                    }
                )
            }
        }
    }
}

All of them were used like this

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
        setContent {
            ProductsScreen()
        }
}

Output: (The gif doesn't show the crashing, but if you use rememberDismissState instead, it will crash after clicking the button)

Note: Everything I did is to fix the crash issue that I encountered, but since I'm using your code and I just filled the missing parts, maybe it will solve yours.