用例 - 响应 QML 用户输入

支持的用户输入类型

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.

This article covers how to handle basic user input. 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
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
        }
    }
}

注意： Some Item types have their own built-in input handling. For example, Flickable responds to mouse dragging, touch flicking, and mouse wheel scrolling.

键盘和按钮事件

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