The Qt Quick module provides support for the most common types of user input, including mouse and touch events, text input, and key-press events. Other modules provide support for other types of user input for example, the Qt Sensors module provides support for shake-gestures in QML applications.
This article covers how to handle basic user input; for further information about motion-gesture support, see the Qt Sensors documentation. For information about audio-visual input, see the Qt Multimedia 文档编制。
The input handlers let QML applications handle mouse and touch events. For example, you could create a button by adding a TapHandler to an Image, or to a Rectangle 采用 Text object inside. The TapHandler responds to taps or clicks on any type of pointing device.
import QtQuick 2.12 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 } } }
For more advanced use cases such as, drag, pinch and zoom gestures, see documentation for the DragHandler and PinchHandler 类型。
注意: Some types have their own built-in input handling. For example, Flickable responds to mouse dragging and mouse wheel scrolling. It handles touch dragging and flicking via synthetic mouse events that are created when the touch events are not handled.
Button and key presses, from buttons on a device, a keypad, or a keyboard, can all be handled using the Keys attached property. This attached property is available on all Item derived types, and works with the Item::focus property to determine which type receives the key event. For simple key handling, you can set the focus to true on a single Item and do all your key handling there.
import QtQuick 2.3 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 } }
For text input, we have several QML types to choose from. TextInput provides an unstyled single-line editable text, while TextField is more suitable for form fields in applications. TextEdit can handle multi-line editable text, but TextArea is a better alternative as it adds styling.
以下码片段演示如何在应用程序中使用这些类型:
import QtQuick 2.12 import QtQuick.Controls 2.4 import QtQuick.Layouts 1.3 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" } } } }