Qt Quick 例 - ポインタハンドラ

Qt Quick Controlsには、多くの種類のユーザーインターフェースに対応できる既製のコンポーネントが含まれていますが、場合によっては、そのようなコンポーネントを「一から」作成する必要が生じることもあります。その場合は、ポインタハンドラを多用することになります。ここでは、一般的なものからあまり一般的ではないものまで、さまざまなインタラクションパターンの実装方法を示す簡単なサンプルをいくつか紹介します。

この例を実行ファイルとしてビルドすると、最上位のListView からページを選択できるようになります。TouchpointFeedbackSprite およびMouseFeedbackSprite コンポーネントは、PointHandler を使用して、ユーザーがポインティングデバイスで何を行っているかについてのフィードバックを提供する方法を示しています。これらのコンポーネントは、例全体を通じて常に表示されており、他の場所でのインタラクションに干渉することはありません。 これらのコンポーネントは、ユーザーインターフェースの動画やライブデモを行う必要がある場合に、再利用するのに便利です。

また、個々の QML ファイルの一部は、qml ツールを使用してコマンドラインから実行することもでき、特定の種類のコンポーネントがどのように構築されるかを確認するための手っ取り早いリファレンスとして活用できます。

TapHandler

「tap」ページでは、タッチスクリーンのタップ、長押し、およびさまざまなボタンによるマウスクリックを検出する方法を示しています。また、gesturePolicy のさまざまな値を試すこともできます。

マルチタップボタン

このページには、gesturePolicy の値が異なる3つのカスタムButton コンポーネントがあります。1つは、押下から離すまでの間、指やマウスをボタン内に留めておく必要があります。もう1つは、ボタンの外側にドラッグしてから、離す前に再びボタン内にドラッグし直しても実行されます。そしてもう1つは、system-wide drag threshold を少し超えてドラッグすると、押下状態が解除されます。 この例をタッチスクリーンで試してみると、異なる指を使って3つのボタンすべてに同時に操作できるはずです。

パイメニュー

このページでは、長押しによって起動され、アニメーションとともに表示される、タッチスクリーン対応のパイメニューの作成方法について説明します。 メニュー項目を選択するには、中心位置からセクターのいずれかへドラッグして指を離します。メニューの外へドラッグしたり、メニューの中央で指を離したりすると、何も選択されません。灰色のビューポートの外へドラッグすると、メニューはキャンセルされます。

PointHandler

「シングルポイントハンドラ」ページでは、PointHandler が、SinglePointHandler::point およびhandlerPoint::device に記載されているプロパティの一部からフィードバックを提供します。このサンプルを実行ファイルとしてビルドした場合、メインの pointerhandlers.qml ファイル内の PointHandlers からのフィードバックと同時に、このフィードバックも確認できます。

「tablet canvas」ページでは、PointHandler を使用して、types of pointing devices を個別に識別しています。これにより、コンピュータに描画タブレットが接続されている場合、ペン、エアブラシ、マーカーなど、さまざまな種類のスタイラスを使って Canvas アイテム上に描画することができます。 スタイラスの消しゴムを使ってストロークを「消去」することもできます（ここでは、背景色でその上に描画することで消去しています）。いくつかのHoverHandlers が、どのタイプのスタイラスや消しゴムが検出されたかに関するフィードバックを提供します。

HoverHandler

「ホバーサイドバー」ページでは、マウスがボタンコンポーネントとそのコンテナの両方に同時にホバーしている状態を検出する方法を示しています。HoverHandler::blocking プロパティを設定することで、この伝播を無効にできます。ここでは、HoverHandler とMouseArea のすべての組み合わせを試して、ホバー検出の処理方法を比較することができます。また、もう1つのHoverHandler を使用して、シーン座標系における現在のマウス位置を表示しています。

また、アニメーション化された「プラットフォーム」上のHoverHandler が、マウスカーソルの下を滑るたびにホバー状態になることも確認できます。

DragHandler

「joystick」ページには、単にDragHandler がImage をドラッグする仕組みがあります。AnchorChanges を持つState がアンカーのロックを解除し、ドラッグを可能にしています。また、AnchorAnimation が、ノブが離された際に中心位置に戻るアニメーションを生成します。

「fling animation」ページでは、DragHandler::centroid::velocity プロパティの用途の一つを紹介しています。これは、QEventPoint::velocity() の値を QML で利用できるようにするだけのものです。この例で使用されているMomentumAnimation コンポーネントは、より負荷の高いソリューションに頼ることなく、物理演算（運動量と摩擦）をシミュレートする方法の一つを示しています。

PinchHandler

「pinch」ページでは、複数の PinchHandler が紹介されています。2 本の指を必要とするものもあれば、3 本を必要とするものもあり、通常のスケーリング、回転、平行移動を実行します。制約はPinchHandler の axis の min および max プロパティによって管理されます。PinchHandler のインスタンスの 1 つは、位置、スケール、回転ではなく、さまざまなRectangle プロパティを操作するために使用されています。さまざまなPinchHandler プロパティが、さまざまな方法でバインドされています。 各インスタンスを個別に操作できるはずです。一部のアイテムには、DragHandler や TapHandler も設定されています。

相互運用性

スライダー

「mixer」ページでは、ListView デリゲート内での複数のハンドラの使用例を示しています。複数のSlider コンポーネントと同時に操作することができ、ListView を横方向にフリックすることもできます。

• DragHandler を使用すると、スライダーのノブがスライドできる「トラック」上の任意の場所からドラッグを開始できます。デフォルトのsnapMode はDragHandler.SnapAuto であるため、system-wide drag threshold を通り過ぎた後、ノブはマウスまたはタッチポイントの真下の中央位置にスナップします。
• WheelHandler は、ノブのy プロパティ（Image ）を直接調整します。
• BoundaryRule は、DragHandler またはWheelHandler のいずれかによってノブが過度にドラッグされるのを防ぎます。
• TapHandler には、通常のSlider コンポーネントにはないジェスチャーが 1 つ追加されています。それは、ノブをタップできることです。

地図

「map」ページでは、SVG Image のドラッグ、変形、および再スケーリングを実演しています。地図上の特定の場所を拡大表示できるはずです。また、ズームレベルが大幅に変更されると、Image::sourceSize が変更され、SVG が別の解像度で再レンダリングされるよう要求されます。 2本の指で垂直方向にドラッグすると、DragHandler が起動し、Rotation 変換を操作して地図の傾きを調整します。

Fake Flickable

「フェイク Flickable」ページでは、個別のポインタハンドラとアニメーションを用いて、Flickable の機能の多くを再現する試みを行っています。Flickableは複雑なコンポーネントですが、ここでは、その複雑さを排除しつつ機能の一部のみを利用したい場合に備え、Flickableが提供する個々の動作を分離する一つの方法をご覧いただけます。

また、ポインタハンドラを利用したコントロールをさらにいくつか備えた、スライド式の「ドロワー」コンポーネントもあります。

サンプルプロジェクト @ code.qt.io