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()        //視窗最小化
                }
            }
        }

    }
}
           

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