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

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

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

Window {id:mainwindowwidth: 640height: 480visible: truetitle: 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.WindowRectangle{anchors.fill: parentcolor:"gray"radius: 10}
}

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

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

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

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

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