Componente GestureDetector
¿Qué es el componente GestureDetector?
El componente GestureDetector detecta interacciones del usuario en su widget hijo: clics, doble clic, movimiento del mouse, clic derecho y arrastres.
¿Cómo se utiliza el GestureDetector?
Envuelve cualquier widget para agregarle detección de gestos:
import GestureDetector from "@seigenta/TypesCraft/widgets/gestureDetector";
import { Text } from "@seigenta/TypesCraft/widgets";
// Uso básico
new GestureDetector({
child: new Text({ text: "Interactúa conmigo" }),
onTap: () => console.log("Clic detectado"),
onDoubleTap: () => console.log("Doble clic"),
onEnterMouse: () => console.log("Mouse entró"),
onLeaveMouse: () => console.log("Mouse salió")
})
Propiedades del componente
El GestureDetector acepta estas propiedades:
- child: (Widget) - Widget hijo que recibirá los gestos (requerido)
- onTap?: () => void - Callback para clic simple
- onDoubleTap?: () => void - Callback para doble clic
- onEnterMouse?: () => void - Callback cuando el mouse entra
- onLeaveMouse?: () => void - Callback cuando el mouse sale
- onSecundaryClick?: () => void - Callback para clic derecho
- onHoldDown?: () => void - Callback al mantener presionado
- onDrag?: (deltaX: number, deltaY: number) => void - Callback durante arrastre con deltas de movimiento
Ejemplos de uso
Ejemplo básico con interacciones comunes:
new GestureDetector({
child: new Container({
child: new Text({ text: "Área interactiva" }),
style: new ContainerStyle({
width: Size.px(200),
height: Size.px(200),
backgroundColor: Color.hex("#f0f0f0")
})
}),
onTap: () => console.log("Clic simple"),
onDoubleTap: () => console.log("Doble clic"),
onEnterMouse: () => console.log("Mouse entró al área"),
onLeaveMouse: () => console.log("Mouse salió del área")
})
Ejemplo avanzado con arrastre:
let position = { x: 0, y: 0 };
new GestureDetector({
child: new Container({
child: new Text({ text: "Arrástrame" }),
style: new ContainerStyle({
width: Size.px(100),
height: Size.px(100),
backgroundColor: Color.hex("#6200ee")
})
}),
onDrag: (deltaX, deltaY) => {
position.x += deltaX;
position.y += deltaY;
console.log(`Nueva posición: ${position.x},${position.y}`);
},
onHoldDown: () => {
console.log("Elemento presionado");
},
onSecundaryClick: () => {
console.log("Clic derecho detectado");
}
})
Comportamiento
El GestureDetector:
- Envuelve cualquier widget para agregarle detección de gestos
- Limpia automáticamente los event listeners cuando ya no son necesarios
- Proporciona deltas precisos durante operaciones de arrastre
- Maneja actualizaciones dinámicas de los callbacks
- Es eficiente en el uso de recursos del DOM