QML教程（三）响应用户输入

以你之姓@ 2024-03-30 13:46 75阅读 0赞

**目录**

一、鼠标和触摸事件

二、键盘和按钮事件

三、文本输入

--------------------

Qt Quick 模块支持最常见的用户输入类型，包括鼠标和触摸事件、文本输入和按键事件。其他模块支持其他类型的用户输入。  
本文介绍如何处理基本用户输入。有关视听输入的信息，请参阅 Qt 多媒体文档。

#### 一、鼠标和触摸事件 ####

例：可以通过将 TapHandler 添加到图像或包含 Text 对象的矩形来创建按钮。点击处理程序响应任何类型的指点设备上的点击或点击。

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

<table> 
 <thead> 
 <tr> 
 <th>事件</th> 
 <th>说明</th> 
 <th>例</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>DragHandler</td> 
 <td>拖动</td> 
 <td> Rectangle { &nbsp; &nbsp; &nbsp; &nbsp; id: feedback &nbsp; &nbsp; &nbsp; &nbsp; border.color: "red" &nbsp; &nbsp; &nbsp; &nbsp; width: Math.max(10, handler.centroid.ellipseDiameters.width) &nbsp; &nbsp; &nbsp; &nbsp; height: Math.max(10, handler.centroid.ellipseDiameters.height) &nbsp; &nbsp; &nbsp; &nbsp; radius: Math.max(width, height) / 2 &nbsp; &nbsp; &nbsp; &nbsp; visible: handler.active &nbsp; &nbsp; } &nbsp; &nbsp; DragHandler { &nbsp; &nbsp; &nbsp; &nbsp; id: handler &nbsp; &nbsp; &nbsp; &nbsp; target: feedback &nbsp; &nbsp; } </td> 
 </tr> 
 <tr> 
 <td>HoverHandler&nbsp;</td> 
 <td>悬停</td> 
 <td>&nbsp;HoverHandler { &nbsp; &nbsp; &nbsp; &nbsp; id: mouse &nbsp; &nbsp; &nbsp; &nbsp; acceptedDevices: PointerDevice.Mouse &nbsp; &nbsp; &nbsp; &nbsp; cursorShape: Qt.PointingHandCursor &nbsp; &nbsp; }</td> 
 </tr> 
 <tr> 
 <td>KeyNavigation</td> 
 <td>箭头键进行按键导航</td> 
 <td> &nbsp;Rectangle { &nbsp; &nbsp; &nbsp; &nbsp; id: bottomRight &nbsp; &nbsp; &nbsp; &nbsp; width: 50; height: 50 &nbsp; &nbsp; &nbsp; &nbsp; color: focus ? "red" : "lightgray" &nbsp; &nbsp; &nbsp; &nbsp; KeyNavigation.left: bottomLeft &nbsp; &nbsp; &nbsp; &nbsp; KeyNavigation.up: topRight &nbsp; &nbsp; } </td> 
 </tr> 
 <tr> 
 <td>Keys</td> 
 <td>按键</td> 
 <td>Keys.onPressed: (event)=&gt; { &nbsp; &nbsp; &nbsp; &nbsp; if (event.key == Qt.Key_Left) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log("move left"); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.accepted = true; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }</td> 
 </tr> 
 <tr> 
 <td>PinchHandler</td> 
 <td>捏合手势</td> 
 <td> &nbsp;Rectangle { &nbsp; &nbsp; &nbsp; &nbsp; id: map &nbsp; &nbsp; &nbsp; &nbsp; color: "aqua" &nbsp; &nbsp; &nbsp; &nbsp; width: 400 &nbsp; &nbsp; &nbsp; &nbsp; height: 300 &nbsp; &nbsp; } &nbsp; &nbsp; PinchHandler { &nbsp; &nbsp; &nbsp; &nbsp; target: map &nbsp; &nbsp; } </td> 
 </tr> 
 <tr> 
 <td>PointHandler</td> 
 <td>单个接触点</td> 
 <td>&nbsp;PointHandler { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id: handler &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; acceptedDevices: PointerDevice.TouchScreen | PointerDevice.TouchPad &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; target: Rectangle { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; parent: glassPane &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: "red" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; visible: handler.active &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; x: handler.point.position.x - width / 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; y: handler.point.position.y - height / 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20; height: width; radius: width / 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; }</td> 
 </tr> 
 <tr> 
 <td>TapHandler&nbsp;</td> 
 <td>用于点击触摸屏或单击鼠标</td> 
 <td> &nbsp; &nbsp; TapHandler { &nbsp; &nbsp; &nbsp; &nbsp; id: tapHandler &nbsp; &nbsp; &nbsp; &nbsp; gesturePolicy: TapHandler.ReleaseWithinBounds &nbsp; &nbsp; &nbsp; &nbsp; onTapped: button.clicked() &nbsp; &nbsp; }</td> 
 </tr> 
 <tr> 
 <td>WheelHandler&nbsp;</td> 
 <td>鼠标滚轮</td> 
 <td> &nbsp; &nbsp; WheelHandler { &nbsp; &nbsp; &nbsp; &nbsp; property: "rotation" &nbsp; &nbsp; &nbsp; &nbsp; onWheel: (event)=&gt; console.log("rotation", event.angleDelta.y, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"scaled", rotation, "@", point.position, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"=&gt;", parent.rotation) &nbsp; &nbsp; }</td> 
 </tr> 
 </tbody> 
</table>

综合示例：

import QtQuick 2.12
    
    Rectangle {
        id: button
        signal clicked
    
        width: 150; height: 50; radius: 3
        color: tapHandler.pressed ? "goldenrod" : hoverHandler.hovered ? "wheat" : "beige"
        border.color: activeFocus ? "brown" : "transparent"
        focus: true
    
        HoverHandler {
            id: hoverHandler
        }
    
        TapHandler {
            id: tapHandler
            onTapped: button.clicked()
        }
    
        Keys.onEnterPressed: button.clicked()
    }

#### 二、键盘和按钮事件 ####

按钮和按键按下（来自设备上的按钮、小键盘或键盘）都可以使用 Keys 附加属性进行处理。此附加属性可用于所有 Item 派生类型，并与 Item：：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"
                }
            }
        }
    }