Arraste e solte

O Jetpack Compose oferece suporte ao recurso de arrastar e soltar com dois modificadores:

• dragAndDropSource: especifica um elemento combinável como ponto de partida do gesto de arrastar.
• dragAndDropTarget: especifica um elemento combinável que aceita os dados soltos.

Os modificadores permitem que os apps compartilhem dados entre dois ou mais elementos combináveis usando ClipData, que é interoperável com implementações de View.

Iniciar um evento de arrastar

Para ativar eventos de arrastar dentro de um componente, adicione o modificador dragAndDropSource, que usa uma função de suspensão como parâmetro. A função define a interação do usuário que inicia a operação de arrastar. O modificador dragAndDropSource aguarda até receber um evento de entrada de ponteiro e, em seguida, executa o lambda transmitido ao manipulador de eventos. Use a lambda para detectar vários eventos de entrada, como toques ou toques longos. Para mais informações, consulte Entrada de ponteiro no Compose.

O evento de entrada do ponteiro geralmente é um pressionamento longo implementado da seguinte forma:

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

Para iniciar uma sessão de arrastar e soltar, chame a função startTransfer(). Dentro desse escopo, use DragAndDropTransferData para representar os dados transferíveis. Os dados podem ser um URI remoto, dados de rich text na área de transferência, um arquivo local ou muito mais, mas todos eles precisam ser agrupados em um objeto ClipData. Forneça texto simples, por exemplo, como mostrado a seguir:

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

Para permitir que a ação de arrastar cruze as bordas do app, o construtor DragAndDropTransferData aceita um argumento flags. No exemplo abaixo, a constante DRAG_FLAG_GLOBAL especifica que os dados podem ser arrastados de um app para outro:

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

DragAndDropTransferData aceita flags com suporte ao sistema de visualização do Android. Consulte a lista de constantes de View para ver uma lista completa das sinalizações disponíveis.

Receber dados de soltar

Atribua o modificador dragAndDropTarget a um elemento combinável para permitir que ele receba eventos de arrastar e soltar. O modificador tem dois parâmetros: o primeiro atua como filtro e especifica o tipo de dados que o modificador pode aceitar, e o segundo envia os dados em um callback.

A instância de callback precisa ser lembrada. O snippet a seguir mostra como lembrar do callback:

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

O próximo snippet demonstra como lidar com texto simples solto:

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

A função de callback precisa retornar true se o evento for consumido ou false se o evento for recusado e não se propagar para o componente pai.

Processar eventos de arrastar e soltar

Modifique os callbacks na interface DragAndDropTarget para observar quando um evento de arrastar e soltar começa, termina ou entra ou sai de um componente para ter um controle preciso da interface e do comportamento do 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

Outros recursos

Codelab: Arrastar e soltar no Compose