Qt Quick 例 - MouseArea

MouseAreaの例では、MouseArea を使用してクリックやドラッグに反応する方法を示しています。詳細については、「Qt Quick の重要な概念 - ユーザー入力」をご覧ください。

例の動作確認

以下の手順でサンプルを実行できます。

• Qt Creator

  Welcome モードを開き、Examples からこの例を選択します。詳細については、「Qt Creator ：チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストからサンプルを選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル：ビルドと実行」を参照してください。

MouseArea の動作

赤い四角形の内側をクリックすると、Text タイプによって、QML で利用可能なそのクリックに関するいくつかのプロパティが一覧表示されます。マウスが押された状態で、かつMouseArea 内に留まっている間、赤い四角形の不透明度は低下します。

MouseArea 内でのクリックやその他の離散的な操作が発生すると、シグナルが発信されます。

onPressAndHold: btn.text = qsTr('Press and hold')
onClicked: (mouse) => { btn.text = qsTr('Clicked (wasHeld=') + mouse.wasHeld + ')' }
onDoubleClicked: btn.text = qsTr('Double clicked')

MouseArea また、アイテムをドラッグ移動させるのにも使用できます。drag プロパティのパラメータを設定することで、ユーザーがマウス領域の境界内でドラッグを開始すると、対象のアイテムがドラッグ移動されます。

drag.target: blueSquare
drag.axis: Drag.XAndYAxis
drag.minimumX: 0
drag.maximumX: box.width - parent.width
drag.minimumY: 0
drag.maximumY: box.height - parent.width

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