Qml之按鈕控件

實現一個普通的按鈕控件

 

 

 

 

思路一：根據功能點出發，就是要點擊效果

1、定義一個按鈕控件，利用按鈕控件自帶的點擊效果onClicked，實現“點擊功能”

2、在這個按鈕控件基礎上，利用背景設置，再將一個有顏色矩形框作為背景。

3、在矩形框中再配置各種文字。

Button{
        width: 160
        height: 32
        x:150
        y:150
        background: Rectangle{
            color: "#FF228FFF"
            radius: 2
            //border.width: 1
            //border.color:Qt.rgba(0,0,0,0.09)
            Text{
                text: qsTr("下一步")
                anchors.centerIn: parent
                font.pixelSize: 14
                font.family: "Microsoft YaHei"
                color: "#FFFFFFFF"
            }
        }
        onClicked: {
            console.log("123456")
        }
    }

 

思路二：根據直面的視覺，這就是一個矩形框 

1、就是一個矩形框，且是帶有樣式的矩形框；因此直接定義一個矩形框。

2、在這個已定義好的矩形框中，再配置各種文字。

3、利用鼠標事件。將這個矩形框所在區域配置為鼠標區域，進而觸發“onChecked”事件。

Rectangle{
        width: 160
        height: 32
        //border.color: "#17000000"
        //border.width: 1
        x:450
        y:150
        Text{
            text: qsTr("下一步")
            anchors.centerIn: parent
            font.pixelSize: 14
            font.family: "Microsoft YaHei"
            color: "#A6000000"
        }
        MouseArea{
            anchors.fill: parent
            //cursorShape: Qt.OpenHandCursor
            onClicked: {
                console.log("654321")
            }
        }
    }

 

利用思路二實現，有一個優勢：可以修改光標的樣式。比如小手（cursorShape: Qt.OpenHandCursor）

 

 

MouseArea信號

MouseArea:onCanceles()
當鼠標事件沒有被接受或是被其他元素截獲時，MouseArea:onCanceles()會被調用。當有多個MouseArea處理輸入時
或是Flickable元素中包含一個MouseArea時，MouseArea:onCanceles()會顯得特別重要。如果在Flickable元素中包
含一個MouseArea時，當執行一些針對於按下信號的邏輯處理然后又拖動鼠標時，Flickable會從MouseArea中截獲鼠標
事件。在這種情況下，當Flickable截獲了MouseArea的鼠標事件時需要重置邏輯。

MouseArea:onClicked(MouseEvent mouse)
當有單擊事件（在MouseArea中按下緊接着彈起）發生時，MouseArea:onClicked方法會被調用。

MouseArea:onDoubleClicked(MouseEvent mouse)
當有雙擊事件（按下緊接着彈起然后再按下）發生時調用。在MouseArea:onDoubleClicked中如果將accepted屬性設置
為假，則在第二次單擊時onPressed、onReleased、onClicked仍會被調用，否則在第二次單擊時onPressed、onReleased、
onClicked不會被調用。

MouseArea:onEntered()
當鼠標進入MouseArea中時，MouseArea:onEntered()會被調用。默認情況下，只有當鼠標在MouseArea中單擊時才會調用，
可如果將hoverEnabled設置為真，當鼠標拖動至MouseArea時也會調用onEntered();

MouseArea:onExites( )
當鼠標離開MouseArea中時，MouseArea:onExites( )會被調用。默認情況下，只有當鼠標在MouseArea中單擊時才會調用，
可如果將hoverEnabled設置為真，當鼠標拖動至MouseArea時也會調用onExited ();

MouseArea:onPositionChanged ( MouseEvent mouse )
當鼠標位置發生改變時會調用onPositionChanged，在這個方法中不會考慮MouseEvent參數的accepted屬性，也就是說所有的
鼠標事件在這里都會被處理，並不會因為某個鼠標事件被拒絕了而不做處理。默認情況下，只有在鼠標按下時才會調用onPositionChanged。
不過如果將hoverEnabled設置為真，當鼠標移動時onPositionChanged也會被調用。

MouseArea:onPressed ( MouseEvent mouse )
當有鼠標按下時onPressed會被調用。MouseEvent類型的參數提供有關按下時的鼠標信息，包括鼠標的位置以及按下時對應的鼠標按鍵。
參數mouse的accepted屬性決定了MouseArea是否要處理這個鼠標事件。如果mouse的accept屬性被設置為假則直到下一個按下事件發生，
這這間任何鼠標事件都不會發送給MouseArea。

MouseArea:onReleased ( MouseEvent mouse )
當有鼠標彈起時會調用onReleased。MouseEvent類型的參數提供有關按下時的鼠標信息，包括鼠標的位置以及按下時對應的鼠標按鍵。
參數mouse的accepted屬性會被忽略不做處理

 

 

補充： 

矩形框嵌套鼠標事件非常實用，比如實現"點擊文字"+“小手”。

1）如果使用Button+Text，能實現點擊功能，但是小手有點難實現，代碼也會顯得冗余。

2）使用Rectangle+MouseArea，就比較簡單實現了。注意的是：需要將矩形框的邊框設置為0（border.width: 0）

 

Rectangle{
        width: 50
        height: 50
        visible: true
        x:100
        y:10
        border.width: 0
        Text {
            anchors.centerIn: parent
            text: qsTr("測試測試")
        }
        MouseArea{
            hoverEnabled: true
            cursorShape: Qt.OpenHandCursor
            anchors.fill: parent
            onClicked: {
                console.log("99999")}
        }
    }