Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
eucliddelphi opened this issue Jan 23, 2024 · 0 comments
Open

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

eucliddelphi opened this issue Jan 23, 2024 · 0 comments

Comments

@eucliddelphi
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant