Arrastrar y soltar

Jetpack Compose admite la función de arrastrar y soltar con dos modificadores:

• dragAndDropSource: Especifica un elemento componible como punto de partida del gesto de arrastre.
• dragAndDropTarget: Especifica un elemento componible que acepta los datos soltados.

Por ejemplo, para permitir que los usuarios arrastren una imagen en tu app, crea una imagen componible y agrega el modificador dragAndDropSource. Para configurar un destino para soltar, crea otro Image componible y agrega el modificador dragAndDropTarget.

Los modificadores se pueden aplicar a varias fuentes de arrastre y a varios destinos para soltar.

Los modificadores permiten que las apps compartan datos entre dos o más elementos componibles. a través de ClipData, que es interoperable con implementaciones de View.

Cómo iniciar un evento de arrastre

Para habilitar eventos de arrastre dentro de un componente, agrega el modificador dragAndDropSource. que toma una función de suspensión como parámetro. La función define al usuario interacción que inicia la operación de arrastre. El modificador dragAndDropSource espera hasta que reciba un evento de entrada del puntero y, luego, ejecuta la expresión lambda pasan al controlador de eventos. Usa la lambda para detectar una variedad de eventos de entrada. como presiones o presiones prolongadas. Para obtener más información, consulta Puntero. entrada en Compose

Por lo general, el evento de entrada del puntero se implementa cuando se mantiene presionado un elemento de la siguiente manera:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        // Transfer data here.
    })
}
DragAndDropSnippets.kt

Para iniciar una sesión de arrastrar y soltar, llama a la función startTransfer(). Dentro de este alcance, usa DragAndDropTransferData para representar las datos transferibles. Los datos pueden ser un URI remoto, datos de texto enriquecido en la un portapapeles, un archivo local, etc., pero todos deben estar reunidos ClipData. Proporciona texto sin formato, por ejemplo, de la siguiente manera:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                )
            )
        )
    })
}
DragAndDropSnippets.kt

Para permitir que la acción de arrastrar cruce los bordes de la aplicación, la El constructor DragAndDropTransferData acepta un argumento flags. En la En el siguiente ejemplo, la constante DRAG_FLAG_GLOBAL especifica que se pueden arrastrarse de una aplicación a otra:

Modifier.dragAndDropSource {
    detectTapGestures(onLongPress = {
        startTransfer(
            DragAndDropTransferData(
                ClipData.newPlainText(
                    "image Url", url
                ),
                flags = View.DRAG_FLAG_GLOBAL
            )
        )
    })
}
DragAndDropSnippets.kt

DragAndDropTransferData acepta marcas compatibles con el sistema Android View. Consulta la lista de constantes de View para obtener una lista exhaustiva de las marcas disponibles.

Recibir datos de la bajada

Asigna el modificador dragAndDropTarget a un elemento componible para habilitarlo. para recibir eventos de arrastrar y soltar. El modificador tiene dos parámetros: el primero funciona como un filtro y especifica el tipo de datos que puede aceptar. segundo entrega los datos en una devolución de llamada.

Ten en cuenta que se debe recordar la instancia de devolución de llamada. El siguiente fragmento muestra cómo recordar la devolución de llamada:

val callback = remember {
    object : DragAndDropTarget {
        override fun onDrop(event: DragAndDropEvent): Boolean {
            // Parse received data
            return true
        }
    }
}
DragAndDropSnippets.kt

En el siguiente fragmento, se muestra cómo controlar el texto sin formato descartado:

Modifier.dragAndDropTarget(
    shouldStartDragAndDrop = { event ->
        event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
    }, target = callback
)
DragAndDropSnippets.kt

La función de devolución de llamada debe mostrar true si se consume el evento, o false. si se rechaza el evento y no se propaga al componente superior.

Cómo controlar eventos de arrastrar y soltar

Anula las devoluciones de llamada en la interfaz DragAndDropTarget para observar cuándo un elemento de arrastrar y soltar comienza, termina, entra o sale de un componente para determinar control de la IU y el comportamiento de la app:

object : DragAndDropTarget {
    override fun onStarted(event: DragAndDropEvent) {
        // When the drag event starts
    }

    override fun onEntered(event: DragAndDropEvent) {
        // When the dragged object enters the target surface
    }

    override fun onEnded(event: DragAndDropEvent) {
        // When the drag event stops
    }

    override fun onExited(event: DragAndDropEvent) {
        // When the dragged object exits the target surface
    }

    override fun onDrop(event: DragAndDropEvent): Boolean = true
}
DragAndDropSnippets.kt

Recursos adicionales

Codelab: Arrastrar y soltar en Compose