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

        }
    }
}

}

總結：舉例： 可以添加進 圖片顯示中，單擊後 瀏覽下一張圖片