2014年6月9日 星期一

在QML建立Button原件 ( Button Component In QML )

介紹:
  • 如何在QML創建一個Button原件
Introduction:
  • How to create Button in QML 

開發環境:
  • QT 5.2
  • QtQuick 2.1
<main.qml>
import QtQuick 2.0

Rectangle {
    id      : root
    width   : 150
    height  : 150
    color   : "#D8D8D8"

    Button {
        id: button
        x: 12; y: 12
        text: "Start"
        onClicked: {
            status.text = "Button clicked!"
        }
        onPressed: {
            console.log("Press")
        }
        onEntered:{
            console.log("Enter")
        }
        onReleased:{
            console.log("Release")
        }
        onCanceled:{
            console.log("Cancel")
        }
        onPressAndHold:{
            console.log("Hold")
        }
    }

    Text {
        id: status
        x: 12; y: 76
        width: 116; height: 26
        text: "waiting ..."
        horizontalAlignment: Text.AlignHCenter
    }
}

<Button.qml>

import QtQuick 2.0

Rectangle {
    id: root
    property alias text: label.text
    //alias宣告一個變數名稱讓外部可以呼叫這一個變數
    signal clicked
    //signal宣告可以讓外部呼叫clicked這一個信號
    signal pressed
    signal entered
    signal released
    signal canceled
    signal pressAndHold

    width   : 120
    height  : 25
    color: "lightsteelblue"
    border.color: "slategrey"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        //表示可執行左鍵與右鍵功能
        hoverEnabled:true
        //與signal的onEntered()有關
        onClicked: {
            root.clicked()
            if (mouse.button == Qt.RightButton){
                //右鍵更換背景顏色
                parent.color = "blue";
            }
            else{
                parent.color = "red";
            }
        }
        onPressed: {
            root.pressed()
        }
        onEntered: {
            root.entered()
        }
        onReleased: {
            root.released()
        }
        onCanceled: {
            root.canceled()
        }
        onPressAndHold: {
            root.pressAndHold()
        }

        //Signal Documentation
        //onCanceled()-當滑鼠事件被攔截時調用
        //onClicked()-滑鼠點擊一下時調用
        //onDoubleClicked()-滑鼠點擊兩下時調用
        //onEntered()-滑鼠進入指定區域時調用
        //onExited()-滑鼠離開指定區域時調用
        //onPositionChanged()-滑鼠位置產生變化時調用
        //onPressAndHold()-滑鼠按住超過800ms時調用
        //onPressed()-滑鼠點擊按下時調用
        //onReleased()-滑鼠點擊放開時調用
    }
}

編譯成功後,當按下左鍵時,Button會變成紅色,按下右鍵時,Button會變成藍色,還有一些相關資訊的變化。




0 意見:

張貼留言