用例 - 在QML中响应用户输入¶

支持的用户输入类型¶

Qt Quick 模块提供了对最常见用户输入类型的支持，包括鼠标和触摸事件、文本输入和按键事件。其他模块提供了对其他类型用户输入的支持。

本文介绍了如何处理基本的用户输入。有关视听输入的信息，请参阅Qt多媒体文档。

鼠标和触摸事件¶

输入处理程序允许QML应用程序处理鼠标和触摸事件。例如，您可以通过向图像或包含文本对象的矩形添加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
        }
    }
}

键盘和按钮事件¶

按钮和按键的按下，无论是来自设备上的按钮、小键盘还是键盘，都可以使用附加属性Keys来处理。这个附加属性在所有派生自Item的类型上都可用，并且与Item::focus属性一起工作，以确定哪种类型接收按键事件。对于简单的按键处理，您可以将焦点设置为true在单个Item上，并在那里处理所有的按键操作。

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