Qt qml Frameless

Qt qml Frameless

main.qml (demo)

//main.qml
import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3

ApplicationWindow {
    id: mainWindow
    width: 400
    height: 400
    visible: true
    title: qsTr('Frameless')
    color: "lightgray"
    flags: Qt.Window | Qt.FramelessWindowHint

    //custom title
    CustomTitleBar{
        anchors.top: parent.top
        anchors.left: parent.left
        height: 35
    }

    //draggable support
    WindowFramelessItem{
        anchors.fill: parent
    }
}

CustomTitleBar.qml: custom title

//CustomTitleBar.qml
import QtQuick 2.0
import QtQuick.Controls 2.12

//custom title
Item {
    anchors.fill: parent

    property int previousX
    property int previousY

    Rectangle {
        id: titleBar
        width: parent.width
        height: 35
        color: "gray"
        clip: true

        MouseArea {
            anchors.fill: parent

            onPressed: {
                previousX = mouseX
                previousY = mouseY
            }

            onMouseXChanged: {
                var dx = mouseX - previousX
                mainWindow.setX(mainWindow.x + dx)
            }

            onMouseYChanged: {
                var dy = mouseY - previousY
                mainWindow.setY(mainWindow.y + dy)
            }
        }

        //main menu
        MenuBar{
            Menu {
                title: "文件";
                MenuItem{
                    text: "退出";
                    onTriggered: Qt.quit();
                }
            }
            Menu {
                title: "帮助";
                MenuItem{
                    text: "关于";
                    onTriggered: root.showAbout();
                }
                MenuItem{
                    text: "官网";
                    onTriggered: Qt.openUrlExternally("http://www.baidu.com");
                }
            }
        }


        //maxmun, minmun, close
        Button {
            id: closeBtn
            width: titleBar.height
            height: width
            anchors.right: titleBar.right
        }

        Button {
            id: mixmunBtn
            width: titleBar.height
            height: width
            anchors.right: closeBtn.left
            anchors.rightMargin: 1
        }

        Button {
            id: minmunBtn
            width: titleBar.height
            height: width
            anchors.right: mixmunBtn.left
            anchors.rightMargin: 1
        }

    }

}

WindowFramelessItem.qml: draggable support

//WindowFramelessItem.qml
import QtQuick 2.0

//draggable support
Item {
    anchors.fill: parent

    property int previousX
    property int previousY

    MouseArea {
        width: 5

        anchors {
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }

        cursorShape: Qt.SizeHorCursor

        onPressed: previousX = mouseX

        onMouseXChanged: {
            var dx = mouseX - previousX
            mainWindow.setWidth(parent.width + dx)
        }

    }

    MouseArea {
        height: 5
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }

        cursorShape: Qt.SizeVerCursor

        onPressed: previousY = mouseY

        onMouseYChanged: {
            var dy = mouseY - previousY
            mainWindow.setY(mainWindow.y + dy)
            mainWindow.setHeight(mainWindow.height - dy)

        }
    }
}