ユーザー入力の処理

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

この Qt Quickモジュールは、マウスやタッチ・イベント、テキスト入力、キー・プレス・イベントなど、最も一般的なタイプのユーザー入力のサポートを提供します。他のモジュールは、他のタイプのユーザー入力のサポートを提供します。

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

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

入力ハンドラによって、QMLアプリケーションはマウスやタッチのイベントを扱うことができます。例えば、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"
            }
        }
    }
}

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

© 2025 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.