Swipe Actions: SwipeToDismissBox and Reveal Actions

#android #kotlin #compose #tutorial

Swipe Actions: SwipeToDismissBox and Reveal Actions

Swipe actions reveal contextual operations, enabling quick access to delete, archive, or other actions.

Basic SwipeToDismissBox

var dismissed by remember { mutableStateOf(false) }

if (!dismissed) {
    SwipeToDismissBox(
        state = rememberSwipeToDismissBoxState(),
        backgroundContent = {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Color.Red)
                    .padding(16.dp),
                contentAlignment = Alignment.CenterStart
            ) {
                Icon(Icons.Default.Delete, contentDescription = "Delete")
            }
        }
    ) {
        ListItem(
            headlineContent = { Text("Swipe me") },
            supportingContent = { Text("Swipe left to delete") }
        )
    }
}

Dual Actions (Left & Right)

SwipeToDismissBox(
    state = rememberSwipeToDismissBoxState(),
    backgroundContent = {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = if (dismissState.dismissDirection == DismissDirection.StartToEnd) {
                Alignment.CenterStart
            } else {
                Alignment.CenterEnd
            }
        ) {
            Icon(Icons.Default.Delete, contentDescription = null)
        }
    }
)

With Confirmation

var showConfirm by remember { mutableStateOf(false) }

if (showConfirm) {
    AlertDialog(
        onDismissRequest = { showConfirm = false },
        text = { Text("Delete this item?") },
        confirmButton = {
            Button(onClick = {
                dismissed = true
                showConfirm = false
            }) { Text("Delete") }
        }
    )
}