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. 「Navigator 」または「2D 」ビュー内の別のコンポーネントに、「Mouse Area 」コンポーネントをドラッグします。

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

ホバー設定

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

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

Mouse Area は非表示のコンポーネントですが、Visible プロパティを持っています。「Visibility 」セクションの「Visible 」のチェックを外すと、マウス領域がマウスイベントに対して透過状態になります。

マウスボタンへの反応

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

「AllButtons 」を選択すると、マウス領域がすべてのマウスボタンに反応するようになります。

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

カーソルの形状を設定する

「Cursor shape 」フィールドで、このマウス領域のカーソル形状を選択します。マウスカーソルが表示されないプラットフォームでは、この設定は効果がない場合があります。

信号ホールド間隔の設定

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

スクロールジェスチャーへの対応

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

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

イベントの伝播

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

イベントの横取りを防ぐ

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

Prevent stealing を選択すると、Mouse Area インスタンスからのマウスイベントの「横取り」を防ぐことができます。コンポーネントがイベントの横取りを開始した後にこの値を設定した場合、次のpress() イベントが発生するまでこの設定は有効になりません。

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

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

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

「Axis 」フィールドで、ドラッグを水平方向、垂直方向、またはその両方で実行できるかを指定します。

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

「Filter children 」を選択すると、子孫の「Mouse Area 」インスタンスをオーバーライドしてドラッグが可能になります。これにより、たとえば、親の「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 」を選択すると、コンテンツがフリック可能領域の境界を越えてドラッグやフリックに追従しない、カスタムエッジ効果が適用されます。

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

「Press delay 」フィールドでは、フリック可能オブジェクトの子要素への押下イベントの配信を遅延させる時間をミリ秒単位で指定します。 これは、フリック操作が望ましくない影響を及ぼす前に、押下イベントに対応する場合に役立ちます。ユーザーが遅延時間が経過する前にフリック可能な要素をドラッグまたはフリックした場合、押下イベントは配信されません。タイムアウト内にボタンが離された場合、押下と離しの両方のイベントが配信されます。

Pixel aligned Content X 、および フィールドで設定された配置の単位を、ピクセル（ ）またはサブピクセル（ ）に設定します。静止コンテンツや、1ピクセル幅の線、テキスト、ベクターグラフィックスなど、エッジのコントラストが高い動的コンテンツを最適化するには、 に設定します。アニメーションの品質を最適化するには、 に設定します。Ytruefalse true false

Synchronous drag がtrue に設定されている場合、マウスやタッチポイントがコンテンツのドラッグを開始するのに十分な距離まで移動すると、コンテンツがジャンプします。これにより、押下時にカーソルやタッチポイントの下にあったコンテンツのピクセルが、そのポイントの下に留まるようになります。デフォルトはfalse で、これは開始時のドラッグ距離を多少犠牲にする代わりに、よりスムーズな操作感（ジャンプなし）を提供します。

フリッカブルのジオメトリを設定する

「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でサポートされているかを示しています。