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

Qt Quick Controlsには、多くの種類のユーザーインターフェイスに十分なビルド済みコンポーネントが含まれていますが、時にはそのようなコンポーネントを「ゼロから」書く必要性に気づくかもしれません。そのような場合、Pointer Handlersをかなり利用する必要があります。これは、一般的なインタラクション・パターンと、あまり一般的でないインタラクション・パターンの実装方法を示す、小さな例の集まりです。

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

また、いくつかのQMLファイルはqmlツールを使ってコマンドラインで実行することもできます。

タップハンドラー

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

マルチタップボタン

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

パイメニュー

このページでは、長押しでアニメーションするタッチスクリーン対応のパイメニューの書き方を紹介します。中央の位置からセクタの1つにドラッグして離すと、メニュー項目を選択できます。メニューの外側をドラッグしたり、メニューの途中で離したりすると、何も選択されません。灰色のビューポートの外側をドラッグすると、メニューはキャンセルされます。

ポイントハンドラ

single point handler "ページでは、PointHandler が、SinglePointHandler::point とhandlerPoint::device にあるプロパティのいくつかからのフィードバックを提供します。 このサンプルを実行可能ファイルとしてビルドした場合、メインの pointerhandlers.qml ファイルにある PointHandlers からのフィードバックと同時に、このフィードバックが表示されます。

タブレット・キャンバス」ページでは、PointHandler を使用して、異なるtypes of pointing devices を一意に検出します。これにより、コンピュータに接続された描画タブレットがあれば、ペン、エアブラシ、マーカーなど、さまざまなタイプのスタイラスでキャンバス・アイテムに描画できます。スタイラスの消しゴムでストロークを「消す」ことができます（ここでは背景色で上から描画しています）。いくつかのHoverHandlers は、どのタイプのスタイラスまたは消しゴムが検出されたかについてのフィードバックを提供します。

ホバーハンドラー

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

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

ドラッグハンドラー

ジョイスティック "のページでは、DragHandler がImage をドラッグしています。State とAnchorChanges はアンカーのロックを解除して、ドラッグができるようにします。AnchorAnimation は、ノブを放したときに、ノブが中央の位置に戻るアニメーションをします。

fling animation "のページでは、DragHandler::centroid::velocityプロパティの使い方の一例を示しています。これは単に、QEventPoint::velocity （）の値をQMLで利用できるようにしたものです。この例で使用されているMomentumAnimation コンポーネントは、より重いソリューションに頼ることなく、物理学（運動量と摩擦）をシミュレートする1つの方法を示しています。

ピンチハンドラー

あるものは2本の指を必要とし、あるものは3本の指を必要とします。PinchHandler のaxis minとmaxプロパティで制約を管理し、通常の拡大縮小、回転、移動を実行します。PinchHandler インスタンスの1つは、位置、スケール、回転ではなく、さまざまなRectangle プロパティを操作するために使用されます。様々なPinchHandler プロパティが様々な方法でバインドされています。各インスタンスを一意に操作できるようにする必要があります。アイテムによっては、DragHandlers や TapHandlers もあります。

相互運用性

スライダー

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

• DragHandler では、スライダーノブがスライドできる「トラック」に沿って、どこでもドラッグを開始できます。デフォルトのsnapMode はDragHandler.SnapAuto であるため、system-wide drag threshold を超えてドラッグすると、ノブはマウスまたはタッチポイントの中央にスナップします。
• WheelHandler は、ノブのy プロパティImage を直接調整します。
• BoundaryRule は、DragHandler またはWheelHandler がノブをドラッグしすぎるのを防ぎます。
• TapHandler は、一般的なSlider コンポーネントが持つジェスチャーよりももう一つジェスチャーを提供します。

地図

map "ページはSVG Image のドラッグ、変形、再拡大を実演します。地図上の特定の場所にズームできるはずだ。ズームレベルが大幅に変更されると、Image::sourceSize 、SVGを異なる解像度で再レンダリングするよう要求するように変更される。二本指で垂直にドラッグすると、Rotation 変換を操作して地図を傾けるDragHandler がアクティブになる。

偽フリック可能

偽Flickable "ページには、Flickable の機能の多くを、個別のポインタ・ハンドラとアニメーションを使って再現する試みが含まれています。Flickableは複雑なコンポーネントですが、ここでは、複雑な機能を使わずに機能の一部だけを持ちたい場合に備えて、個々の動作を分離する1つの方法を見ることができます。

また、スライド式の「ドロワー」コンポーネントもあり、ポインター・ハンドラーを使ったコントロールがいくつか用意されている。

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