Qt Quick Ejemplos - Manejadores de Entrada

Qt Quick Controls contiene componentes pre-construidos que son suficientes para muchos tipos de interfaces de usuario; pero a veces puede encontrar la necesidad de escribir tales componentes "desde cero". En ese caso, necesitará hacer un uso sustancial de los Manejadores de Entrada. Esta es una colección de pequeños ejemplos que muestran cómo implementar algunos patrones de interacción comunes y menos comunes.

Si construyes el ejemplo como un ejecutable, puedes elegir páginas de un nivel superior ListView. Los componentes TouchpointFeedbackSprite y MouseFeedbackSprite muestran cómo utilizar PointHandler para proporcionar información sobre lo que el usuario está haciendo con los dispositivos señaladores: estos componentes están siempre visibles a lo largo del ejemplo, y no interfieren con la interacción en ningún otro lugar. Estos componentes son útiles para reutilizarlos si alguna vez necesitas hacer un vídeo o una demostración en vivo de una interfaz de usuario.

Alternativamente, algunos de los archivos QML individuales se pueden ejecutar en la línea de comandos con la herramienta qml, como un recordatorio rápido para ver cómo se puede construir un tipo particular de componente.

TapHandler

La página "tap" muestra cómo detectar toques en la pantalla táctil, pulsaciones largas y clics del ratón con diferentes botones. También puede probar los diferentes valores de gesturePolicy.

Botones multitoque

En esta página hay tres componentes personalizados de Button, con diferentes valores de gesturePolicy: un botón requiere que mantengas el dedo o el ratón dentro del botón durante todo el tiempo desde que lo pulsas hasta que lo sueltas; otro se ejecutará incluso si arrastras fuera del botón y luego vuelves a arrastrar hacia dentro antes de soltarlo; y otro saldrá de su estado pulsado si arrastras un poco más allá de system-wide drag threshold. Si pruebas este ejemplo en una pantalla táctil, deberías poder interactuar con los tres botones al mismo tiempo con diferentes dedos.

Menú circular

Esta página muestra cómo escribir un menú circular amigable con la pantalla táctil que se anima cuando se activa con una pulsación larga. Puedes seleccionar un elemento del menú arrastrando desde la posición central a uno de los sectores y soltando. Si arrastras fuera del menú, o sueltas en medio del menú, no se selecciona nada. Si arrastras fuera de la ventana gris, el menú se cancela.

Manejador de puntos

En la página "manejador de punto único", PointHandler proporciona información de algunas de las propiedades que se pueden encontrar en SinglePointHandler::point y handlerPoint::device. Si has construido el ejemplo como un ejecutable, verás esta información al mismo tiempo que la información de los PointHandlers en el archivo principal pointerhandlers.qml.

La página "lienzo de la tableta" utiliza PointHandler para detectar de forma única diferentes types of pointing devices, de modo que si tiene una tableta de dibujo conectada a su ordenador, puede dibujar en el elemento Lienzo con diferentes tipos de lápiz: bolígrafo, aerógrafo o rotulador. Puedes "borrar" los trazos con el borrador del stylus (aquí se hace dibujando encima con el color de fondo). Varios HoverHandlers proporcionan información sobre qué tipo de lápiz o goma de borrar se detecta.

HoverHandler

La página "hover sidebar" muestra cómo detectar cuando el ratón pasa por encima de un componente de botón y su contenedor al mismo tiempo. La propagación puede desactivarse estableciendo la propiedad HoverHandler::blocking. Puedes probar todas las combinaciones de HoverHandler y MouseArea aquí, para comparar cómo manejan la detección de hover. Y una más HoverHandler se utiliza para mostrar la posición actual del ratón en coordenadas de la escena.

También puedes verificar que el HoverHandler en la "plataforma" animada se hoveriza cada vez que se desliza bajo el cursor del ratón.

DragHandler

La página "joystick" simplemente tiene un DragHandler arrastrando un Image. Un State con AnchorChanges desbloquea los anclajes para que el arrastre sea posible; y un AnchorAnimation anima el retorno del mando a la posición central cuando se suelta.

La página "fling animation" demuestra un uso de la propiedad DragHandler::centroid::velocity, que simplemente hace que el valor de QEventPoint::velocity() esté disponible en QML. El componente MomentumAnimation que se utiliza en este ejemplo muestra una forma de simular la física (momento y fricción) sin recurrir a soluciones más pesadas.

PinchHandler

La página "pinch" muestra múltiples PinchHandlers: algunos requieren dos dedos y otros tres, para realizar el escalado, rotación y traslación habituales, con restricciones gestionadas a través de las propiedades min y max de los ejes de PinchHandler. Una de las instancias de PinchHandler se utiliza para manipular diferentes propiedades de Rectangle en lugar de posición, escala y rotación. Varias propiedades de PinchHandler están vinculadas de varias maneras. Deberías ser capaz de manipular cada instancia de forma única. Algunos elementos también tienen DragHandlers y TapHandlers.

Interoperabilidad

Deslizadores

La página "mixer" demuestra el uso de múltiples manejadores dentro de un delegado ListView. Puede interactuar con múltiples componentes Slider simultáneamente, y puede mover el ListView lateralmente.

• Un DragHandler le permite empezar a arrastrar en cualquier lugar a lo largo de la "pista" donde el mando deslizante puede deslizarse. Dado que el valor predeterminado de snapMode es DragHandler.SnapAuto, el mando se ajustará a una posición centrada bajo el ratón o el punto táctil una vez que haya arrastrado más allá de system-wide drag threshold.
• Un WheelHandler ajusta directamente la propiedad y del mando Image.
• BoundaryRule impide que DragHandler o WheelHandler arrastren el mando demasiado lejos.
• Un TapHandler proporciona un gesto más de los que tendría un componente Slider típico: se puede tocar el mando.

Mapa

La página "mapa" muestra cómo arrastrar, transformar y reescalar un SVG Image. Se puede hacer zoom en un lugar concreto del mapa; y si se cambia sustancialmente el nivel de zoom, Image::sourceSize pasa a solicitar que el SVG se vuelva a renderizar a una resolución diferente. Arrastrando verticalmente con dos dedos se activa un DragHandler que manipula una transformación Rotation para inclinar el mapa.

Fake Flickable

La página "fake Flickable" contiene un intento de reproducir gran parte de la funcionalidad de Flickable utilizando animaciones y manejadores de puntero discretos. Flickable es un componente complejo, pero aquí puedes ver una forma de separar los comportamientos individuales que proporciona, en caso de que quisieras tener sólo parte de la funcionalidad sin la complejidad.

También hay un componente "cajón" deslizante que contiene algunos controles más con manejador de puntero.

Proyecto de ejemplo @ code.qt.io