Jetpack Compose: InteractionSources, Ripple y usted | Carter Hudson | Septiembre de 2021
Recientemente, escribí un artículo sobre cómo usar Jetpack Compose para implementar un botón de repetición. Después de leer este artículo, un colega hizo una pregunta: «¿Qué pasa si uso este modificador en algo que no sea Button?» Buena pregunta. Averigüemos.
Empecemos por la personalización repeatingClickable Del artículo anterior:
Como ejercicio, intentemos hacer nuestra propia versión. ○deRepeatingButton Del artículo anterior, pero no utilizado esta vez Button Bajo el capó.Composición Buttonde content El parámetro es un RowScope Amplíe la función y proporcione a Surface Debajo del capó, así que saltemos al intermediario y hagamos uno Surface y Row Contiene algunos Text. Nosotros tiraremos repeatingClickable Ingresar SurfaceCadena de modificadores y ver qué pasa.Dejaremos que actualice un repeatCount Cuando se mantiene presionado, se muestra como el contenido del botón:
negligencia Box; Solo se utiliza para posicionamiento.Lo importante aqui es repeatingClickable De hecho no está en uno Button. Cuando mantenemos presionado el botón not-a-podemos ver que funciona exactamente en línea con nuestras esperanzas:
Espera … ¿qué diablos es el efecto dominó? Finalmente lo recuperamos del último, ¡y ahora nos han robado!
Resulta que confiamos en Button Llamar Modifier.clickable Obtén el efecto dominó gratis. ¿Hay alguna manera de recuperarlo?
manera simple
Bueno, la forma más rápida es tirar un vacío .clickable Ingresar Modifier Encadenar y llamarlo un día.
Quiero decir, funcionará. 🤷♂
La forma correcta ™
Descargo de responsabilidad: no sé si esto es Derecha Way, pero es muy similar a la forma de Compose Button He aprendido algo en el camino, así que quiero compartirlo con todos.
Antes de continuar, debemos comprender algunos jugadores clave:
Mutable/InteractionSourceRepresenta una tubería observableInteractions.Envuelve unFlow<Interaction>.IndicationRepresenta un efecto visual que indica que se está produciendo una interacción.
Para ser honesto, no está mal en términos de complejidad.Lo que tenemos que hacer aquí es determinar qué Interaction Se crea cuando se produce el evento de puntero y se envía a la canalización.Para esto necesitamos actualizar nuestro repeatingClickable implementar. Echale un vistazo:
Hay algunas cosas a tener en cuenta aquí:
- Cambiamos nuestro
InteractionSourceLos parámetros sonMutableInteractionSourcePara que podamos visitaremitmétodo. Siempre pasamos en una instancia mutable, pero el polimorfismo nos permite referirnos a ella como una instancia inmutable antes. - Puedes ver que estamos creando
PressInteractionDespués de nuestros altibajos, y pasóInteractionSourcePara ser correctos, estamos determinando si nuestro evento up será lanzado o cancelado, pero para la reacción en cadena, no creo que importe. - Cuando creamos una interacción ascendente, necesitamos darle una interacción descendente emparejada (
downPress). - El último ingrediente es agregar
Modifier.indicationPara nosotrosModifiercadena.Puedes ver que estamos pasando nuestrointeractionSourceY una instanciaIndication. En este caso, utilizamos el marco proporcionadoIndicationfábricarememberRiple().Modifier.indicationPrestará atenciónInteractionSourceSomos pipelineInteractionsPasar y dibujar ondasIndicationpara nosotros.
Pensamientos finales
Lo tienes.Aprendimos que podemos ceñirnos a nuestra repeatingClickable Modifier Vaya a cualquier Composable para mantener la funcionalidad repetitiva.También aprendimos a usar InteractionSourcearena Indications para obtener el efecto dominó No Confíe en la implementación subyacente Button o Modifier.clickable¡Lo llamaré éxito!
