Anwendungsfall - Reagieren auf Benutzereingaben in QML

Unterstützte Arten von Benutzereingaben

Das Qt Quick Modul bietet Unterstützung für die gängigsten Arten von Benutzereingaben, einschließlich Maus- und Berührungsereignissen, Texteingaben und Tastendruckereignissen. Andere Module bieten Unterstützung für andere Arten von Benutzereingaben.

In diesem Artikel wird beschrieben, wie grundlegende Benutzereingaben behandelt werden. Für Informationen über audiovisuelle Eingaben siehe die Qt Multimedia Dokumentation.

Maus- und Berührungsereignisse

Mit den Input-Handlern können QML-Anwendungen Maus- und Berührungsereignisse verarbeiten. Sie können zum Beispiel eine Schaltfläche erstellen, indem Sie ein TapHandler zu einem Bild oder zu einem Rectangle mit einem Text Objekt hinzufügen. TapHandler reagiert auf Berührungen oder Klicks mit jeder Art von Zeigegerät.

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
        }
    }
}

Hinweis: Einige Objekttypen haben ihre eigene integrierte Eingabeverarbeitung. Zum Beispiel reagiert Flickable auf das Ziehen mit der Maus, das Streichen mit dem Finger und das Scrollen mit dem Mausrad.

Tastatur- und Tastenereignisse

Tasten- und Tastendrücke von Tasten auf einem Gerät, einem Tastenfeld oder einer Tastatur können alle mit der Eigenschaft Keys attached behandelt werden. Diese angehängte Eigenschaft ist für alle von Item abgeleiteten Typen verfügbar und bestimmt zusammen mit der Eigenschaft Item::focus, welcher Typ das Tastenereignis erhält. Für eine einfache Tastenbehandlung können Sie den Fokus auf einem einzelnen Item auf true setzen und die gesamte Tastenbehandlung dort durchführen.

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
    }
}

Für die Texteingabe stehen mehrere QML-Typen zur Auswahl. TextInput bietet einen ungestylten, einzeiligen, editierbaren Text, während TextField besser für Formularfelder in Anwendungen geeignet ist. TextEdit kann mehrzeiligen, editierbaren Text verarbeiten, aber TextArea ist eine bessere Alternative, da es ein Styling hinzufügt.

Der folgende Ausschnitt zeigt, wie Sie diese Typen in Ihrer Anwendung verwenden können:

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.