从Qt官方文档学习qml（三） 了解TapHandler（鼠标和触摸事件、键盘事件、单行输入，多行输入）

平台：qtcreator 5.12.6 

本功能又叫响应用户输入，转载于Qt官网平台

 

对TapHandler的解释：该输入处理程序让QML应用程序处理的鼠标和触摸事件。例如，您可以通过将TapHandler添加到Image或包含Text对象的Rectangle中来创建按钮。所述TapHandler响应敲击或点击在任何类型的指向装置的。

Keys：键盘响应事件

ColumnLayout：列对齐

TextField：单行输入

TextArea：多行输入

implicitWidth：默认宽度

 

代码

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Item{
    id:root
    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        id: topRect
        opacity: 0.5

        x: 100
        y: 100
        width: 100
        height: 100
        color: "blue"
        focus: true

        TapHandler{
            onTapped: topRect.width+=10
        }
        Keys.onUpPressed: topRect.color="red"
        Keys.onDownPressed: topRect.opacity=0.8
        Keys.onEnterPressed: {
            topRect.color="blue"
            topRect.opacity=1

        }
    }

    ColumnLayout{
        anchors.top: topRect.bottom
        width: topRect.width
        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: "Inital 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"

        }
    }
}

}

总结：举例： 可以添加进 图片显示中，单击后 浏览下一张图片