Qt Quick Exemples - Gestionnaires de pointeurs

Qt Quick Controls contient des composants prédéfinis qui sont suffisants pour de nombreux types d'interfaces utilisateur ; mais il peut arriver que vous ayez besoin d'écrire de tels composants "à partir de zéro". Dans ce cas, vous devrez faire un usage important des gestionnaires de pointeurs. Il s'agit d'une collection de petits exemples qui montrent comment mettre en œuvre certains modèles d'interaction courants et moins courants.

Si vous construisez l'exemple en tant qu'exécutable, vous pouvez choisir des pages à partir d'un niveau supérieur ListView. Les composants TouchpointFeedbackSprite et MouseFeedbackSprite montrent comment utiliser PointHandler pour fournir un retour d'information sur ce que l'utilisateur fait avec les dispositifs de pointage : ces composants sont toujours visibles dans l'exemple et n'interfèrent pas avec l'interaction ailleurs. Ces composants sont pratiques à réutiliser si vous avez besoin de faire une vidéo ou une démonstration en direct d'une interface utilisateur.

Par ailleurs, certains des fichiers QML individuels peuvent être exécutés en ligne de commande à l'aide de l'outil qml, afin de se rappeler rapidement comment un type particulier de composant peut être construit.

TapHandler

La page "tap" montre comment détecter les appuis sur l'écran tactile, les appuis longs et les clics de souris avec différents boutons. Vous pouvez également essayer les différentes valeurs de gesturePolicy.

Boutons multi-tap

Cette page présente trois composants Button personnalisés, avec différentes valeurs gesturePolicy: un bouton exige que vous gardiez votre doigt ou votre souris à l'intérieur du bouton pendant toute la durée de l'appui jusqu'au relâchement ; un autre s'exécutera même si vous glissez à l'extérieur du bouton, puis si vous glissez à nouveau à l'intérieur avant de relâcher ; et un autre sortira de son état appuyé si vous glissez un peu au-delà de system-wide drag threshold. Si vous essayez cet exemple sur un écran tactile, vous devriez être en mesure d'interagir avec les trois boutons en même temps avec différents doigts.

Menu circulaire

Cette page montre comment créer un menu circulaire adapté aux écrans tactiles, qui s'affiche de manière animée lorsqu'il est activé par un appui long. Vous pouvez sélectionner un élément du menu en le faisant glisser de la position centrale vers l'un des secteurs et en le relâchant. Si vous glissez en dehors du menu ou si vous relâchez au milieu du menu, rien n'est sélectionné. Si vous glissez en dehors de la fenêtre grise, le menu est annulé.

Gestionnaire de points

Sur la page "single point handler", PointHandler fournit un retour d'information à partir de certaines des propriétés qui peuvent être trouvées dans SinglePointHandler::point et handlerPoint::device. Si vous avez construit l'exemple en tant qu'exécutable, vous verrez ce retour d'information en même temps que le retour d'information des PointHandlers dans le fichier principal pointerhandlers.qml.

La page "tablet canvas" utilise PointHandler pour détecter de manière unique les différentes types of pointing devices, de sorte que si vous avez une tablette de dessin connectée à votre ordinateur, vous pouvez dessiner sur l'élément Canvas avec différents types de stylet : stylo, aérographe ou marqueur. Vous pouvez "effacer" les traits avec la gomme du stylet (ici en dessinant par-dessus avec la couleur d'arrière-plan). Plusieurs sites HoverHandlers fournissent des informations sur le type de stylet ou de gomme détecté.

HoverHandler

La page "hover sidebar" montre comment détecter le survol d'un bouton et de son conteneur en même temps. La propagation peut être désactivée en définissant la propriété HoverHandler::blocking. Vous pouvez essayer toutes les combinaisons de HoverHandler et MouseArea ici, pour comparer la façon dont elles gèrent la détection du survol. Un autre site HoverHandler est utilisé pour afficher la position actuelle de la souris dans les coordonnées de la scène.

Vous pouvez également vérifier que le site HoverHandler sur la "plate-forme" animée est survolé chaque fois qu'il glisse sous le curseur de la souris.

DragHandler

La page "joystick" comporte simplement un DragHandler qui fait glisser un Image. Un State avec un AnchorChanges déverrouille les ancrages de sorte que le glissement est possible ; et un AnchorAnimation anime le retour du bouton à la position centrale lorsqu'il est relâché.

La page "fling animation" démontre une utilisation de la propriété DragHandler::centroid::velocity, qui rend simplement la valeur de QEventPoint::velocity() disponible en QML. Le composant MomentumAnimation utilisé dans cet exemple montre une façon de simuler la physique (élan et frottement) sans avoir recours à des solutions plus lourdes.

PinchHandler

La page "pinch" présente plusieurs PinchHandler : certains nécessitent deux doigts et d'autres trois, pour effectuer les opérations habituelles de mise à l'échelle, de rotation et de translation, avec des contraintes gérées via les propriétés min et max de l'axe PinchHandler. L'une des instances de PinchHandler est utilisée pour manipuler différentes propriétés de Rectangle plutôt que la position, l'échelle et la rotation. Diverses propriétés PinchHandler sont liées de différentes manières. Vous devez être en mesure de manipuler chaque instance de manière unique. Certains éléments disposent également de DragHandlers et de TapHandlers.

Interopérabilité

Curseurs

La page "mixer" démontre l'utilisation de plusieurs gestionnaires à l'intérieur d'un délégué ListView. Il est possible d'interagir simultanément avec plusieurs composants Slider et de faire basculer le site ListView sur le côté.

• Un DragHandler vous permet de commencer à glisser n'importe où le long de la "piste" où le bouton du curseur peut glisser. Comme la valeur par défaut de snapMode est DragHandler.SnapAuto, le bouton s'enclenchera dans une position centrée sous la souris ou le point de contact une fois que vous aurez fait glisser le curseur au-delà de system-wide drag threshold.
• Un WheelHandler ajuste directement la propriété y du bouton Image.
• Un BoundaryRule empêche DragHandler ou WheelHandler de faire glisser le bouton trop loin.
• Un TapHandler offre un geste supplémentaire par rapport à un composant Slider typique : vous pouvez taper sur le bouton.

Carte

La page "map" montre comment faire glisser, transformer et remettre à l'échelle un SVG Image. Vous devriez pouvoir zoomer sur un endroit particulier de la carte ; et si le niveau de zoom est modifié de manière substantielle, Image::sourceSize est modifié pour demander le re-rendu du SVG à une résolution différente. En tirant verticalement avec deux doigts, on active une page DragHandler qui manipule une transformation Rotation pour incliner la carte.

Faux Flickable

La page "fake Flickable" tente de reproduire une grande partie des fonctionnalités de Flickable à l'aide de gestionnaires de pointeurs et d'animations discrets. Flickable est un composant complexe, mais vous pouvez voir ici une façon de séparer les comportements individuels qu'il fournit, au cas où vous voudriez n'avoir qu'une partie de la fonctionnalité sans la complexité.

Il y a également un composant "tiroir" coulissant contenant quelques autres contrôles alimentés par le pointeur.

Exemple de projet @ code.qt.io