UIにインタラクションを追加する

ポインティングデバイスやキーボードを使ってアクションを実行したり、画面の可視領域を水平方向や垂直方向にフリックしたりするなど、UIにインタラクションメソッドを追加するために、プリセットされた基本コンポーネントのインスタンスを作成することができます。これらはComponents >Default Components >Basic にあります。

さらに、アプリケーションの進行状況をユーザーに知らせたり、ユーザーからの入力を収集したりするために、プリセットUIコントロールのインスタンスを作成することができます。

ユーザーとのインタラクションに使用できる基本コンポーネントは以下のとおりです：

• マウス・エリア
• フォーカス・スコープ
• フリック可能
• 基本的なインタラクション・メソッドの概要

Properties ビューのコンポーネント・インスタンスのプロパティに値を指定できます。

マウスエリアの作成

シグナルとハンドラはマウスインタラクションを提供するために使われます。具体的には、Mouse Area コンポーネントを使用して JavaScript コールバック（シグナル・ハンドラとも呼ばれる）を定義し、定義された領域内でマウス・イベントを受け付けることができます。

マウスエリアを定義する簡単な方法は、コンポーネントを選択し、コンテキストメニューからAdd Mouse Area を選択することです。これにより、マウス領域が親の領域に固定されます。親がRectangle（またはItemから派生したコンポーネント）の場合、マウスエリアは親の寸法で定義された領域を埋めます。

また、親よりも小さいまたは大きい領域を定義することもできます。ボタンなどのいくつかのコントロールは、マウスエリアを含みます。

定義済みのシグナル

マウスエリアは、さまざまなマウスイベントに反応してシグナルを発します：

• canceled()
• clicked()
• doubleClicked()
• entered()
• exited()
• positionChanged()
• pressAndHold()
• pressed()
• released()

マウスエリアの有効化

Mouse Area は不可視コンポーネントで、通常、可視コンポーネントと組み合わせて使用し、そのコンポーネントのマウス操作を提供します。効果的にプロキシとして動作することで、マウス処理のロジックをMouse Area コンポーネントに含めることができます。

マウスエリアを作成するには

• Navigator または2D ビューでコンポーネントを選択し、コンテキストメ ニューでAdd Mouse Area を選択します。
• Components からMouse Area コンポーネントをドラッグします：
  1. Components >Default Components >Basic に移動する。
  2. Mouse Area コンポーネントを、Navigator または2D ビューの別のコンポーネントにドラッグする。

Properties のMouse Area セクションで、Area プロキシされたコンポーネントのマウス処理を有効にします。

ホバリングの設定

デフォルトでは、Mouse Area コンポーネントはマウスクリックのみを報告し、マウスカーソルの位置の変更は報告しません。マウスボタンが押されていなくても、適切なハンドラが使用され、他のプロパティの値が必要に応じて更新されるようにするには、Hover を選択します。

マウス領域をマウスイベントに対して透明にする

Mouse Area は不可視コンポーネントですが、Visible プロパティを持っています。Visibility セクションのVisible をクリアして、マウス・エリアをマウス・イベントに対して透明にします。

マウスボタンに反応する

Mouse Area セクションのAccepted buttons フィールドで、マウス・エリアが反応するマウス・ボタンを選択します。

マウスエリアがすべてのマウスボタンに反応するようにするには、AllButtons を選択します。

OR 演算子 (|) で値を組み合わせることで、Code ビュー、Edit モード、またはBinding Editor でさらに多くのボタンのサポートを追加できます。使用可能な値の詳細については、MouseArea::acceptedButtons を参照してください。

カーソル形状の設定

Cursor shape フィールドで、このマウス領域のカーソル形状を選択します。マウス・カーソルが表示されないプラットフォームでは、この値は何の効果もないかもしれない。

信号ホールド間隔の設定

Hold interval フィールドで、pressAndHold() シグナルが発せられるまでの経過時間をミリ秒単位で上書きする値を指定する。明示的に値を設定しなかった場合、または値がリセットされた場合は、グローバルに設定されたアプリケーション・スタイル・ヒントに従います。特定のMouse Area インスタンスに特定の間隔が必要な場合は、この値を設定します。

スクロール・ジェスチャーに応答する

トラックパッドの 2 本指フリック ジェスチャなど、マウス以外のデバイスからのスクロール ジェスチャに応答する場合は、Scroll gesture を選択します。チェックボックスが選択されていない場合、ホイール信号は、ホイール付きマウスからホイールイベントが発生した場合にのみ出力され、スクロールジェスチャイベントは、それらを処理する他のコンポーネントに渡されます。

例えば、カーソルがMouse Area インスタンスを含むコンポーネントの上にあるときに、ユーザがフリックジェスチャを実行し、その下にあるFlickable コンポーネントとインタラクトしようとする場合があります。このプロパティをfalse に設定すると、PinchArea コンポーネントがマウスホイールまたはピンチジェスチャを処理し、Flickable コンポーネントがフリックジェスチャを処理するようになります。

イベントの伝播

マウス位置とボタンクリックに関する情報は、イベントハンドラプロパティが定義されているシグナルを介して提供されます。マウス領域がMouse Area コンポーネントの他のインスタンスの領域と重なる場合、Propagate events を選択することで、clicked() 、doubleClicked() 、pressAndHold() のイベントを他のコンポーネントに伝搬することができます。各イベントは、その下にある有効なMouse Area に伝搬され、Mouse Area がイベントを受け入れるまで、この視覚階層を伝搬します。

盗用を防ぐ

Flickable のような子コンポーネントのマウスイベントをフィルタするコン ポーネント内にMouse Area インスタンスを配置することができま す。しかし、フリックなどのジェスチャーが親コンポーネントに認 識されると、マウスイベントがMouse Area から盗まれる可能性が あります。

Mouse Area インスタンスからマウスイベントが盗まれないようにするには、Prevent stealing を選択します。コンポーネントがイベントの盗用を開始した後にこの値を設定した場合、次のpress() イベントが発生するまでこの値は有効になりません。

詳細については、MouseArea を参照してください。

ドラッグプロパティの設定

Drag セクションで、コンポーネントをドラッグするためのプロパティを指定します。Target フィールドでドラッグするコンポーネントを選択します。アンカーされたコンポーネントはドラッグできないことに注意してください。

Axis フィールドで、ドラッグを水平に行うか、垂直に行うか、またはその両方を行うかを指定します。

Threshold フィールドで、ドラッグ操作を開始する閾値をピクセル単位で設定します。デフォルトでは、この値はプラットフォーム依存の値にバインドされています。

Mouse Area インスタンスを上書きするドラッグを有効にするには、Filter children を選択します。これにより、例えば、親Mouse Area インスタンスがドラッグを処理する一方で、子孫の領域がクリックを処理できるようになります。

Smoothed を選択すると、ドラッグ操作の開始後にのみターゲット コンポーネントが移動します。このチェックボックスが選択されていない場合、ターゲットコンポーネントは現在のマウス位置に直接移動します。

フォーカス範囲の設定

キーが押されたり離されたりすると、キーイベントが生成され、フォーカスされているコンポーネントに配信されます。アクティブなフォーカスを持つコンポーネントがない場合、キーイベントは無視されます。アクティブなフォーカスを持つコンポーネントがキーイベントを受け入れると、伝搬は停止します。そうでない場合は、イベントが受け入れられるか、ルート・コンポーネントに到達してイベントが無視されるまで、イベントはコンポーネントの親に送られます。

コンポーネントがフォーカスを持つのは、Advanced セクションのFocus プロパティがtrue に設定されている場合です。ただし、再利用可能なコンポーネントやインポートされたコンポーネントの場合は、これでは不十分なので、Focus Scope コンポーネントを使用する必要があります。

Focus Scope コンポーネントのインスタンスを作成するには、Components >Default Components >Basic と進みます。

各フォーカススコープ内では、1 つのオブジェクトがフォーカスを有効にすることができます。複数のコンポーネントがフォーカスを有効にしている場合、最後にフォーカスを有効にしたコンポーネントがフォーカスを持ち、他のコンポーネントは未設定になります。

フォーカススコープがアクティブフォーカスを受け取ると、フォーカスが設定されているコンポーネント（もしあれば）もアクティブフォーカスを得ます。こ の コ ン ポーネ ン ト が フ ォ ー カ ス コ ープで も あ る 場合、 フ ォ ー カ ス コ ープ と サブ フ ォ ー カ ス コ ン ポーネ ン ト の両方がア ク テ ィ ブ フ ォ ー カ ス を持つ こ と にな り ます。

Focus Scope コンポーネントはビジュアルコンポーネントではないので、子コンポーネントのプロパティはフォーカススコープの親コンポーネントに公開する必要があります。レイアウトと ポジショナは、これらのビジュアル・プロパティとスタイリング・プロパティを使用してレイアウトを作成します。

詳細については、 Qt Quick の「キーボード・フォーカス」を参照してください。

フリック可能なコンポーネントの作成

Flickable コンポーネントは子コンポーネントをサーフェス上に配置し、ユーザーがドラッグしてフリックすると、子コンポーネント上のビューがスクロールします。この動作は、List View やGrid View のような、多数の子コンポーネントを表示するコンポーネントの基礎となります。詳しくは、リストビューとグリッドビューを参照してください。

従来のユーザーインターフェースでは、ユーザーはスクロールバーや矢印ボタンなどの標準的なコントロールを使ってビューをスクロールすることができます。時には、マウスボタンを押しながらカーソルを動かすことで、ビューを直接ドラッグすることもできます。タッチベースのユーザーインターフェースでは、このドラッグ操作は、ユーザーがビューに触れるのを止めた後もスクロールを続けるフリック操作で補完されることがよくあります。

フリック可能なコンポーネントのクリッピング

Flickable コンポーネントのコンテンツは自動的にクリッピングされません。コンポーネントをフルスクリーンコンポーネントとして使用しない場合は、Visibility セクションでClip を選択することを検討してください。

フリックを有効にする

フリック可能なコンポーネントを作成するには

1. Components >Default Components >Basic に移動します。
2. Flickable コンポーネントをNavigator または2D ビューにドラッグします。
3. Flickable セクションで、Interactive をtrue に設定します。

   

フリックを一時的に無効にするには、Interactive をfalse に設定します。これにより、コンポーネントの子との特別なインタラクションが可能になります。例えば、Flickable コンポーネントの子であるポップアップをスクロールしている間、フリック可能なマップをフリーズしたい場合があります。

フリック方向の設定

Flickable セクションで、Flick direction を設定して、ユーザーがビューを水平または垂直にフリックできるかどうかを決定します。

AutoFlickDirection を選択すると、コンテンツの高さがフリッカブルの高さと等しくない場合に垂直方向に、コンテンツの幅がフリッカブルの幅と等しくない場合に水平方向にフリックできるようになります。

コンテンツの高さまたは幅がフリッカブルの高さまたは幅より大きい場合は、AutoFlickIfNeeded を選択します。

フリック速度の設定

Flickable 」セクションの「Max. velocity 」フィールドで、ビューをフリックする最大速度をピクセル/秒で設定します。

Deceleration 、フリックが減速する速度を設定します。

移動の設定

Flickable 」セクションで、「Movement 」フィールドの値を設定し、フリック可能なビューのエッジを物理的な硬い境界ではなく、ソフトに見せるかどうかを決定します。

コンテンツがフリッカブルの境界を越えてドラッグまたはフリックしても追従しないカスタムエッジエフェクトには、StopAtBounds を選択します。

Behavior フィールドの値に応じて、コンテンツがフリッカブルの境界を越えてドラッグまたはフリックに追従するようにするには、FollowBoundsBehavior を選択します。

Press delay フィールドでは、フリッカブルの子への押下を遅延させる時間をミリ秒単位で指定します。これは、フリック動作が望ましくない影響を与える前に、押下に反応する場合に便利です。遅延時間がタイムアウトする前にユーザがflickableをドラッグまたはフリックした場合、pressイベントは配信されません。タイムアウト内にボタンが離された場合、押下と離下の両方が配信されます。

Pixel aligned は、Content X とY フィールドで設定された整列の単位をピクセル (true) またはサブピクセル (false) に設定します。1ピクセル幅の線、テキスト、ベクターグラフィックスなど、静止コンテンツやエッジのコントラストが高い動画コンテンツに最適化する場合は、true に設定します。アニメーションの品質に最適化する場合は、false に設定します。

Synchronous drag をtrue に設定すると、マウスまたはタッチ ポイントが十分に移動してコンテンツのドラッグが始まると、コンテンツがジャンプして、押されたときにカーソルまたはタッチ ポイントの下にあったコンテンツ ピクセルがそのポイントの下に残るようになる。デフォルトはfalse で、よりスムーズなエクスペリエンス（ジャンプなし）が得られますが、その代償としてドラッグ開始時の距離が失われます。

Flickable ジオメトリの設定

Flickable Geometry セクションのContent size フィールドでは、フリッカブルによって制御されるサーフェスの寸法を指定します。通常、W とH フィールドの値は、フリッカブルに配置されたコンポーネントの合計サイズに設定します。Left margin 、Right margin 、Top margin 、Bottom margin フィールドでは、コンテンツの周囲に追加のマージンを設定できます。

Origin フィールドはコンテンツの原点を指定します。これは、レイアウトの方向に関係なく、コンテンツの左上の位置を指します。通常、X とY の値は0に設定されます。しかし、List View とGrid View は、デリゲートのサイズのばらつきや、可視領域外でのコンポーネントの挿入や削除により、任意の原点を持つ可能性があります。

基本的なインタラクション・メソッドのまとめ

次の表は、UIに基本的なインタラクション・メソッドを追加するために使用できるコンポーネントの一覧と、それらの開発者向けドキュメントへのリンクです。これらはComponents >Default Components >Basic にあります。MCUサポートの列は、どのコンポーネントがMCUでサポートされているかを示しています。