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

支持的用户输入类型

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

本文介绍了如何处理基本用户输入。有关音视频输入的信息，请参阅Qt Multimedia文档。

鼠标和触摸事件

输入处理器允許QML应用程序处理鼠标和触摸事件。例如，您可以在图片或包含Text对象的Rectangle上添加一个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
        }
    }
}

注意：一些项目类型具有自己的内置输入处理。例如，Flickable会对鼠标拖动、触摸滑动和鼠标滚轮滚动作出响应。

键盘和按钮事件

来自设备上的按钮、数字键盘或键盘的按钮和按键都可以使用Keys附加属性来处理。此附加属性在所有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提供了一个无样式的单行可编辑文本，而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"
            }
        }
    }
}