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. 全部代码

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: mainWindow
    flags: Qt.Window | Qt.FramelessWindowHint
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    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  } }
        ]
    }
}