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

如何在 QML 应用程序中接受用户输入并表示响应的示例

支持的用户输入类型

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

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

鼠标和触摸事件

输入处理程序允许 QML 应用程序处理鼠标和触摸事件。例如，您可以通过向 Image 或包含 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 属性配合使用以确定哪种类型接收按键事件。对于简单的按键处理，您可以在单个项目上设置 focus 为 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"
            }
        }
    }
}