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

    }
}

本文原创，转载请注明出处。