O Jetpack Compose oferece suporte ao recurso de arrastar e soltar usando dois modificadores:
dragAndDropSource: especifica um elemento combinável como o ponto de partida do gesto de arrastar.dragAndDropTarget: especifica um elemento combinável que aceita os dados soltos.
Por exemplo, para permitir que os usuários arrastem uma imagem no app, crie uma imagem combinável
e adicione o modificador dragAndDropSource. Para configurar um destino de soltar, crie outro
elemento combinável de imagem e adicione o modificador dragAndDropTarget.
Os modificadores podem ser aplicados a várias origens de arrastar e vários destinos de soltar.
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 o usuário
interação que inicia a operação de arrastar. O modificador dragAndDropSource
aguarda até receber um evento de entrada de ponteiro e executa o lambda.
passados para o manipulador de eventos. Usar o lambda para detectar vários eventos de entrada
como toques ou toques longos. Para mais informações, consulte Ponteiro
entrada no Compose.
O evento de entrada do ponteiro geralmente é um pressionamento longo implementado da seguinte maneira:
Modifier.dragAndDropSource {
detectTapGestures(onLongPress = {
// Transfer data here.
})
}
Para iniciar uma sessão de arrastar e soltar, chame a função startTransfer().
Dentro desse escopo, use DragAndDropTransferData para representar o
transferíveis. Os dados podem ser um URI remoto, dados de rich text na
área de transferência, um arquivo local, entre outros, mas todos precisam ser unidos em um
ClipData. Forneça texto simples, por exemplo:
Modifier.dragAndDropSource {
detectTapGestures(onLongPress = {
startTransfer(
DragAndDropTransferData(
ClipData.newPlainText(
"image Url", url
)
)
)
})
}
Para permitir que a ação de arrastar cruze as bordas do aplicativo, o
O construtor DragAndDropTransferData aceita um argumento flags. Na
exemplo a seguir, a constante DRAG_FLAG_GLOBAL especifica que os dados podem
ser arrastados de um aplicativo para outro:
Modifier.dragAndDropSource {
detectTapGestures(onLongPress = {
startTransfer(
DragAndDropTransferData(
ClipData.newPlainText(
"image Url", url
),
flags = View.DRAG_FLAG_GLOBAL
)
)
})
}
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
Atribuir o modificador dragAndDropTarget a um elemento combinável para ativar esse recurso
para receber eventos de arrastar e soltar. O modificador tem dois parâmetros: o primeiro
atua como um filtro e especifica o tipo de dados que o modificador pode aceitar, e a
entrega os dados em um retorno de chamada.
A instância do callback precisa ser lembrada. O snippet a seguir mostra como memorizar o retorno de chamada:
val callback = remember {
object : DragAndDropTarget {
override fun onDrop(event: DragAndDropEvent): Boolean {
// Parse received data
return true
}
}
}
O próximo snippet demonstra como lidar com texto simples solto:
Modifier.dragAndDropTarget(
shouldStartDragAndDrop = { event ->
event.mimeTypes().contains(ClipDescription.MIMETYPE_TEXT_PLAIN)
}, target = callback
)
A função de callback retornará true se o evento for consumido. Ou false
se o evento for recusado e não for propagado para o componente pai.
Processar eventos de arrastar e soltar
Modifique os callbacks na interface DragAndDropTarget para observar quando uma
um evento de arrastar e soltar começa, termina ou entra ou sai de um componente para
da IU e do comportamento do aplicativo:
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
}
Outros recursos
Codelab: Arrastar e soltar no Compose