ユーザー入力の処理

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

この Qt Quick モジュールは、マウスやタッチイベント、テキスト入力、キー押下イベントなど、最も一般的なユーザー入力の種類に対応しています。その他のユーザー入力の種類については、他のモジュールが対応しています。

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

マウスおよびタッチイベント

入力ハンドラを使用することで、QMLアプリケーションはマウスやタッチイベントを処理できます。たとえば、Imageや、内部にText オブジェクトを含むRectangle にTapHandler を追加することで、ボタンを作成できます。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
        }
    }
}

注：一部の アイテムタイプには、独自の組み込み入力処理機能があります。たとえば、Flickable は、マウスのドラッグ、タッチ操作によるフリック、マウスホイールのスクロールに応答します。

キーボードおよびボタンイベント

デバイス、キーパッド、またはキーボード上のボタンによるボタン押下やキー押下は、すべて `Keys ` アタッチドプロパティを使用して処理できます。このアタッチドプロパティは、すべての `Item ` 派生型で利用可能であり、`Item::focus ` プロパティと連携して、どのタイプがキーイベントを受け取るかを決定します。単純なキー処理の場合は、単一の `Item ` の `focus` を `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 はスタイルが適用されていない単行の編集可能テキストを提供しますが、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"
            }
        }
    }
}

ポジショナーとレイアウトテキストの表示

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.