aclassen / ComposeReorderable

Enables reordering by drag and drop in Jetpack Compose (Desktop) LazyList & LazyGrid.
Apache License 2.0
821 stars 86 forks source link

Item freezes after adding SwipeToDismissBox. How to solve it? #282

Open eucliddelphi opened 7 months ago

eucliddelphi commented 7 months ago

Hi there. I am trying to add a Swipe to delete (left) to each reordeble item. Here is the way I follow, which also will help you to reproduce the issue:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun VerticalReorderList(
    modifier: Modifier = Modifier,
    vm: ReorderListViewModel,
) {
    val state = rememberReorderableLazyListState(onMove = vm::moveDog, canDragOver = vm::isDogDragEnabled)
    LazyColumn(
        state = state.listState,
        modifier = modifier.reorderable(state)
    ) {
        itemsIndexed(vm.dogs, { _, item -> item.key }) { index, item ->
       // items(vm.dogs, { item -> item.key }) { item ->

            val dismissState = rememberSwipeToDismissState(
                confirmValueChange = { swipeToDismissValue ->
                    if (swipeToDismissValue == SwipeToDismissValue.EndToStart) {
                       vm.onDelete(index)
                        true
                    } else
                        false
                },
                positionalThreshold = { it / 3 }
            )

            SwipeToDismissBox(
                state = dismissState,
                backgroundContent = {
                    Box(
                        Modifier
                            .fillMaxSize()
                            .background(
                                color = Color.Gray,
                                shape = RoundedCornerShape(13.dp)
                            ),
                        contentAlignment = Alignment.CenterEnd
                    ) {
                        Text("Delete")
                    }
                },
                enableDismissFromStartToEnd = false
            ) {

            ReorderableItem(state, item.key) { dragging ->
                val elevation = animateDpAsState(if (dragging) 8.dp else 0.dp)
                Column(
                    modifier = Modifier
                        .detectReorderAfterLongPress(state)
                        .shadow(elevation.value)
                        .fillMaxWidth()
                        .background(MaterialTheme.colors.surface)
                ) {
                    Text(
                        text = item.title,
                        modifier = Modifier.padding(16.dp)
                    )
                    Divider()
                }
            }
            }
        }
    }
}

To make it run, I added the dependancy for Material 3 implementation("androidx.compose.material3:material3:1.2.0-beta01")

and also added a method in ReorderListViewModel to delete items:

fun onDelete(index: Int) {
        dogs = dogs.toMutableList().apply {
            removeAt(index)
        }
    }

Here is a demo what happens at swipe: Screen_recording_20240123_140229.webm

Please help to fix the issue. Many thanks in advance.