QML- QML 响应用户输入

一、概述

Qt Quick模块支持最常见的用户输入类型，包括鼠标和触摸事件、文本输入和按键事件。其他模块也能支持其他类型的用户输入，例如 Qt Sensors 模块支持QML应用程序中的抖动手势，但是要有对应的硬件才能实现这样的功能。同时对于有关audio-visual 视听输入的信息，请参阅 Qt Multimedia 文档。

二、鼠标和触摸事件

QML应用程序可以处理鼠标和触摸事件。例如，你可以通过给图像添加一个TapHandler来创建按钮，或者给一个内部有文本对象的矩形添加一个TapHandler来创建按钮。TapHandler响应任何类型的指向设备上的点击或点击。

就比如下面这里点击就延长这个宽度

  import QtQuick 2.12

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

有关更高级的用例，如拖动、缩放和缩放手势，请参阅DragHandler和PinchHandler类型的文档。

注意:：有些类型有自己内置的输入处理。例如，Flickable响应鼠标拖动和鼠标滚轮滚动。它通过合成的鼠标事件来处理触摸拖动和点击，这些鼠标事件是在触摸事件没有被处理时创建的。

三、键盘和按钮事件

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

就比如下面这个使用键盘 左右、上下键移动红色的框框。

 import QtQuick 2.3

  Item {
    
    
      id: root

      width: 320
      height: 480

      Rectangle {
    
    
          color: "green"
          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 2.12
  import QtQuick.Controls 2.4
  import QtQuick.Layouts 1.3

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