使用例 - QMLでユーザー入力に応答する

サポートされているユーザー入力の種類

Qt Quickモジュールは、マウスイベント、タッチイベント、テキスト入力、キー押下イベントなど、最も一般的なタイプのユーザー入力をサポートしています。他のモジュールでは、他の種類のユーザ入力をサポートしています。

この記事では、基本的なユーザー入力の処理方法について説明します。オーディオビジュアル入力については、Qt Multimediaのドキュメントを参照してください。

マウスイベントとタッチイベント

入力ハンドラによって、QMLアプリケーションはマウスやタッチのイベントを扱うことができます。例えば、ImageにTapHandler 、あるいはRectangle にText オブジェクトを追加することで、ボタンを作成することができます。TapHandler はあらゆるタイプのポインティングデバイスのタップやクリックに反応します。

import QtQuick

Item {
    id: root

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"

        TapHandler {
            onTapped: rectangle.width += 10
        }
    }
}

注意： いくつかのItemタイプは、独自の入力処理を内蔵しています。例えば、Flickable はマウスドラッグ、タッチフリック、マウスホイールスクロールに反応します。

キーボードとボタンのイベント

デバイス上のボタン、キーパッド、キーボードからのボタンやキーの押下は、すべてKeys のアタッチド・プロパティを使って処理できます。このattachedプロパティは、すべてのItem 派生タイプで利用可能で、Item::focus プロパティと連携して、どのタイプがキーイベントを受け取るかを決定します。単純なキー処理であれば、Item のフォーカスを true に設定し、そこですべてのキー処理を行うことができます。

import QtQuick

Item {
    id: root

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: rectangle
        x: 40
        y: 20
        width: 120
        height: 120
        color: "red"

        focus: true
        Keys.onUpPressed: rectangle.y -= 10
        Keys.onDownPressed: rectangle.y += 10
        Keys.onLeftPressed: rectangle.x += 10
        Keys.onRightPressed: rectangle.x -= 10
    }
}

テキスト入力については、いくつかのQMLタイプから選択することができます。TextInput はスタイルのない1行の編集可能なテキストを提供しますが、TextField はアプリケーションのフォームフィールドにより適しています。TextEdit は複数行の編集可能なテキストを扱うことができますが、TextArea はスタイルが追加されるので、より良い選択肢です。

次のスニペットは、アプリケーションでこれらの型を使用する方法を示しています：

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 300
    height: 200
    visible: true

    ColumnLayout {
        anchors.fill: parent
        TextField {
            id: singleline
            text: "Initial Text"
            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
            Layout.margins: 5
            background: Rectangle {
               implicitWidth: 200
               implicitHeight: 40
               border.color: singleline.focus ? "#21be2b" : "lightgray"
               color: singleline.focus ? "lightgray" : "transparent"
            }
        }

        TextArea {
            id: multiline
            placeholderText: "Initial text\n...\n...\n"
            Layout.alignment: Qt.AlignLeft
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.margins: 5
            background: Rectangle {
               implicitWidth: 200
               implicitHeight: 100
               border.color: multiline.focus ? "#21be2b" : "lightgray"
               color: multiline.focus ? "lightgray" : "transparent"
            }
        }
    }
}

本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。