Qt QML实现 无边框圆角窗口拖动（附窗口控制按钮）

我们平常用软件时应该有注意到他们都是没有边框的，而在一般情况下，qt运行的窗口都是有边框的并自带最大/小化和关闭按钮的，那如何实现无边框的效果呢？

其实无边框化很简单，用Window自带的flags属性就能够做到了，但只设置Qt.FramelessWindowHint会发现任务栏中没有程序图标，再加上Qt.Window就行了

Window {
    id:mainwindow
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color:"gray"
    flags: Qt.FramelessWindowHint|Qt.Window
    //Qt.FramelessWindowHint将窗口设置为无边框
    //Qt.Window保证在系统中被识别为独立窗口
}

然后就会发现窗口的四角变成尖的了，不是很美观，但Window是没有radius属性的，那怎么办呢？我们用一个圆角的Rectangle撑满Window，并将Window本身的color改为transparent（透明）就能实现圆角效果了

Window {
    ...
    color:"transparent"
    flags: Qt.FramelessWindowHint|Qt.Window

    Rectangle{
        anchors.fill: parent
        color:"gray"
        radius: 10
    }
}

接下来如何实现拖动呢？也很简单，用MouseArea撑满Rectangle（当然范围可以看自己需要），然后调用qt的Window中的startSystemMove()函数即可

Window {
    id:mainwindow
    ...
    
    ...
    
    MouseArea{
        anchors.fill: parent
        onPressed: (mouse)=>{
            if(mouse.button===Qt.LeftButton){
                mainwindow.startSystemMove()
            }
        }
    }
}

最后把控制窗口的三个按钮放上去就算完成了

Window {
    id:mainwindow
    ...

    ......

    Button{
        ...
        text:"×"
        onClicked: {
            Qt.quit()
        }
    }
    Button{
        ...
        text:"▢"
        property bool ismax: false    //判断最大/小化
        onClicked: {
            ismax=!ismax
            if(ismax){
                mainwindow.showMaximized()
            }
            else{
                mainwindow.showNormal()
            }
        }
    }
    Button{
        ...
        text:"-"
        onClicked: {
            mainwindow.showMinimized()
        }
    }

这样我们就成功实现了无边框窗口拖动，和自定义的最大/小化和关闭按钮，但细致的地方，如MouseArea位置，button自定义等就都看自己需求而定了