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