QML自定义标题栏

1. 去掉系统标题栏

flags: Qt.Window | Qt.FramelessWindowHint

2.增加拖拽效果

MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        property point clickPos: "0,0"
        
        //此处是为了增加了一点颜色动画
        onReleased:  titleBar.state= "Released"
        onPressed: {
            //此处是为了增加了一点颜色动画
            titleBar.state = "Pressed"
            
            //获取鼠标的位置
            clickPos = Qt.point(mouse.x, mouse.y)
        }
        onPositionChanged: {
            var pos = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
            mainWindow.setX(mainWindow.x + pos.x)
            mainWindow.setY(mainWindow.y + pos.y)
        }
    }

3. 增加一点颜色动画

//标题栏颜色动画
    states: [
        State { name: "Pressed"; PropertyChanges { target: titleBar; color : pressedColor } },
        State { name: "Released"; PropertyChanges { target: titleBar; color : releasedColor }}
    ]
    transitions: [
        Transition { ColorAnimation { to: releasedColor; duration: 200 } },
        Transition { ColorAnimation { to: pressedColor; duration: 200  } }
    ]

4. 全部代码

Rectangle {
    id: titleBar
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 30
    color: releasedColor
    state: "Released"

    property string pressedColor: "#2e6b89"
    property string releasedColor: "#263238"
    MouseArea {
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
        property point clickPos: "0,0"
        
        //此处是为了增加了一点颜色动画
        onReleased:  titleBar.state= "Released"
        onPressed: {
            //此处是为了增加了一点颜色动画
            titleBar.state = "Pressed"
            
            //获取鼠标的位置
            clickPos = Qt.point(mouse.x, mouse.y)
        }
        onPositionChanged: {
            var pos = Qt.point(mouse.x - clickPos.x, mouse.y - clickPos.y)
            mainWindow.setX(mainWindow.x + pos.x)
            mainWindow.setY(mainWindow.y + pos.y)
        }
    }

    //软件Icon
    Image {
        id: icon
        y: 2
        width: 26
        height: 26
        anchors.left: parent.left
        anchors.margins: 5
        source: icon
    }

    Text {
        anchors.left: icon.right
        width: 26
        height: 26
        y:2
        color: "white"
        text: qsTr(softName)
        font.pointSize: 12
        horizontalAlignment: Text.AlignLeft
        verticalAlignment: Text.AlignVCenter
    }

    //关闭按钮
    CloseWindowButton{
        id: closeWindowButton
        anchors.margins: 2
        fxHeight: titleBar.height - anchors.margins * 2
        fxWidth: titleBar.height- anchors.margins * 2
    }

    //标题栏颜色动效
    states: [
        State { name: "Pressed"; PropertyChanges { target: titleBar; color : pressedColor } },
        State { name: "Released"; PropertyChanges { target: titleBar; color : releasedColor }}
    ]
    transitions: [
        Transition { ColorAnimation { to: releasedColor; duration: 200 } },
        Transition { ColorAnimation { to: pressedColor; duration: 200  } }
    ]
}