QML實現自定義標題欄

最近在做音樂播放器，系統提供的標題欄也太醜了，所以準備自定義一個。

廢話不多說，直接上效果圖：

播放滾動條有點醜，下一步打算盤它。

 

上代碼：

Window {
    id: root
    visible: true
    width: 480
    height: 100
    title: qsTr("音樂播放器")
    flags: Qt.Window | Qt.FramelessWindowHint   //去標題欄

    //記錄鼠標移動的位置，此處變量過多會導致移動界面變卡
    property point  clickPos: "0,0"

    //背景圖
    Image {
        id: rootImage
        smooth: false
        source: "new/prefix1/background2.png"
        fillMode: Image.PreserveAspectFit
    }

    //自定義標題欄
    Rectangle{
        id: mainTitle
        x:0
        y:0
        width: root.width
        height: 30
        color: "#00000000"

        //處理鼠標移動後窗口座標邏輯
        MouseArea{
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton  //只處理鼠標左鍵
            onPressed: {    //鼠標左鍵按下事件
                clickPos = Qt.point(mouse.x, mouse.y)
            }
            onPositionChanged: {    //鼠標位置改變
                //計算鼠標移動的差值
                var delta = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
                //設置窗口座標
                root.setX(root.x + delta.x)
                root.setY(root.y + delta.y)
            }
        }

        //關閉窗口按鈕
        Image {
            id: closeButton
            x:0
            anchors.right: parent.right
            width: parent.height
            height: width
            source: "new/prefix1/closei.png"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    Qt.quit()               //退出程序
                }
            }
        }

        //最小化窗口按鈕
        Image {
            id: minButton
            x: 0
            anchors.right: closeButton.left
            anchors.rightMargin: 1
            width: parent.height
            height: width
            source: "new/prefix1/mini.png"

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    root.showMinimized()        //窗口最小化
                }
            }
        }

    }
}

本文原創，轉載請註明出處。