Qt Quick Exemples - Gestionnaires de pointeurs

Qt Quick Controls contient des composants prêts à l'emploi qui suffisent pour de nombreux types d'interfaces utilisateur ; mais vous pouvez parfois avoir besoin d'écrire de tels composants « à partir de zéro ». Dans ce cas, vous devrez recourir largement aux gestionnaires de pointeurs. Voici une série de petits exemples illustrant comment mettre en œuvre certains modèles d'interaction courants et d'autres moins courants.

Si vous compilez l’exemple sous forme d’exécutable, vous pouvez choisir des pages à partir d’un menu principal ListView. Les composants TouchpointFeedbackSprite et MouseFeedbackSprite montrent comment utiliser PointHandler pour fournir un retour d’information sur ce que l’utilisateur fait avec les périphériques de pointage : ces composants restent visibles tout au long de l’exemple et n’interfèrent en aucun cas avec les interactions ailleurs. Ces composants sont pratiques à réutiliser si vous avez un jour besoin de réaliser une vidéo ou une démonstration en direct d’une interface utilisateur.

Il est également possible d’exécuter certains fichiers QML individuels depuis la ligne de commande à l’aide de l’outil qml, afin de se rappeler rapidement comment créer un type particulier de composant.

TapHandler

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

Boutons multi-taps

Cette page présente trois composants d’ Button s personnalisés, avec différentes valeurs d’ gesturePolicy: un bouton nécessite que vous gardiez votre doigt ou votre souris à l’intérieur du bouton pendant toute la durée de l’action, de l’appui au relâchement ; un autre s’exécutera même si vous faites glisser votre doigt hors du bouton puis que vous le ramenez à l’intérieur avant de le relâcher ; et le dernier sortira de son état d’appui si vous faites glisser votre doigt légèrement au-delà de l’ system-wide drag threshold. Si vous testez cet exemple sur un écran tactile, vous devriez pouvoir interagir simultanément avec les trois boutons à l’aide de doigts différents.

Menu circulaire

Cette page explique comment créer un menu circulaire adapté aux écrans tactiles qui s'affiche avec une animation lorsqu'il est activé par un appui long. Vous pouvez sélectionner un élément du menu en faisant glisser votre doigt depuis le centre vers l’un des secteurs, puis en le relâchant. Si vous faites glisser votre doigt en dehors du menu ou si vous le relâchez au milieu du menu, rien n’est sélectionné. Si vous faites glisser votre doigt en dehors de la zone d’affichage grise, le menu est annulé.

PointHandler

Sur la page « single point handler », PointHandler fournit des retours d’information sur certaines propriétés disponibles sur SinglePointHandler::point et handlerPoint::device. Si vous avez compilé l’exemple en exécutable, vous verrez ces retours d’information en même temps que ceux des PointHandlers du fichier principal pointerhandlers.qml.

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

HoverHandler

La page « hover sidebar » montre comment détecter lorsque la souris survole simultanément un composant bouton et son conteneur. La propagation peut être désactivée en définissant la propriété HoverHandler::blocking. Vous pouvez tester ici toutes les combinaisons d’ HoverHandler s et d’ MouseArea s, afin de comparer leur gestion de la détection au survol. Une autre HoverHandler est utilisée pour afficher la position actuelle de la souris dans les coordonnées de la scène.

Vous pouvez également vérifier que l’élément « HoverHandler » situé sur la « plateforme » animée est détecté au survol chaque fois qu’il glisse sous le curseur de la souris.

DragHandler

La page « joystick » comporte simplement un DragHandler faisant glisser un Image. Un State avec AnchorChanges déverrouille les ancrages afin de permettre le glissement ; et un AnchorAnimation anime le retour du bouton à sa position centrale lorsqu’il est relâché.

La page « animation de fling » illustre une utilisation de la propriété DragHandler::centroid::velocity, qui rend simplement accessible en QML la valeur renvoyée par QEventPoint::velocity(). Le composant MomentumAnimation utilisé dans cet exemple montre une façon de simuler des phénomènes physiques (quantité de mouvement et frottement) sans recourir à des solutions plus lourdes.

PinchHandler

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

Interopérabilité

Curseurs

La page « mixer » illustre l’utilisation de plusieurs gestionnaires au sein d’un délégué ListView. Vous pouvez interagir simultanément avec plusieurs composants Slider et faire glisser l’ ListView latéralement.

• Un DragHandler vous permet de commencer à faire glisser n’importe où le long de la « piste » sur laquelle le curseur peut se déplacer. Comme la snapMode par défaut est DragHandler.SnapAuto, le curseur s’alignera automatiquement sur une position centrée sous la souris ou le point de contact une fois que vous aurez dépassé la system-wide drag threshold.
• Un « WheelHandler » ajuste directement la propriété « y » du curseur « Image ».
• Un « BoundaryRule » empêche soit la propriété « DragHandler », soit la propriété « WheelHandler » de faire glisser le bouton trop loin.
• Un « TapHandler » offre un geste supplémentaire par rapport à un composant « Slider » classique : vous pouvez appuyer sur le bouton.

Carte

La page « map » illustre le glissement, la transformation et le redimensionnement d’un ImageSVG. Vous devriez pouvoir zoomer sur un emplacement particulier de la carte ; et si le niveau de zoom est modifié de manière significative, l’ Image::sourceSize est modifiée pour demander que le SVG soit réaffiché à une résolution différente. Un glissement vertical à deux doigts active une fonction « DragHandler » qui manipule une transformation de type « Rotation » pour incliner la carte.

Fake Flickable

La page « faux Flickable » tente de reproduire une grande partie des fonctionnalités de Flickable à l’aide de gestionnaires de pointeur discrets et d’animations. Flickable est un composant complexe, mais vous pouvez voir ici une façon de séparer les comportements individuels qu’il propose, au cas où vous souhaiteriez disposer uniquement d’une partie des fonctionnalités sans la complexité.

On y trouve également un composant « tiroir » coulissant contenant quelques contrôles supplémentaires pilotés par des gestionnaires de pointeur.

Exemple de projet sur code.qt.io