QWidget转QML之主界面无边框显示 :两行代码搞定

欢迎大家来到IT世界,在知识的湖畔探索吧!

关于QML主界面无边框显示在自己实现前网上找到了一些实现方式。

方式1： 单独实现一个继承自uickWindow的派生类。

需要重写 mousePressEvent、mouseReleaseEvent、mouseMoveEvent事件和在main主程序里qmlRegisterType注入派生类到QML。

看着就复杂 还有闪烁问题 不考虑。

方式2：main.cpp中通过uickView设置无边框方式..。

虽然功能上可以达到无边框要求，但如果我的实现不是采用uickView来加载的main.qml 就麻烦了。

比如我的就是通过mlApplicationEngine来加载，engine没有setFlags接口。代码如下

mlApplicationEngine engine; engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

欢迎大家来到IT世界,在知识的湖畔探索吧!

我的实现方式

main.qml中使用Window ，这个正好是继承自uickWindow 刚好flags能派上用场

代码实现如下

欢迎大家来到IT世界,在知识的湖畔探索吧!Window { id:root; visible: true; width: 990; height: 630 + 30; minimumWidth: 990; minimumHeight: 630 + 30; //flags: Qt.FramelessWindowHint //不能参照网上方式只赋值注释这句 会导致无边框窗口点击任务栏不能最小化或没有任务栏窗口 flags: Qt.FramelessWindowHint | Qt.Window |Qt.WindowSystemMenuHint| Qt.WindowMinimizeButtonHint|Qt.WindowMaximizeButtonHint; //灰色0.9透明度 color:Qt.rgba(0.5,0.5,0.5,0.9); DSRectangle { id:topbar; width: parent.width - leftbar.width; anchors.left: leftbar.right; height: 50; color: "#D54F4A"; DSMouseArea { //只在topbar区域拖曳 id: dragRegion; anchors.fill: parent; property point clickPos:"0,0"; onPressed: { clickPos =Qt.point(mouse.x,mouse.y); } onPositionChanged: { //鼠标偏移量 var delta =Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y); root.setX(root.x+delta.x); root.setY(root.y+delta.y); } } }

Window和flags两行代码就能搞定无边框显示 还不影响以前已经实现的代码 是不是特别简单。

无边框效果

欢迎大家来到IT世界,在知识的湖畔探索吧!

当然 无边框实现后 没有最小、最大、关闭按钮 这个也很简单

分别加3个按钮 在onClicked里实现root.showMinimized()、root.showNormal();、root.showMinimized()、root.close();的调用即可 注意最大化与还原功能的实现即可

当然为了达到双击上面toolbar也能达到放大缩小效果，需要实现MouseArea。下面贴图还实现了拖动功能，测试效果很好，拖动中也不会出现实现方式1的闪烁效果

DSMouseArea { id: dragRegion; anchors.fill: parent; property point clickPos:"0,0"; onPressed:{ clickPos =Qt.point(mouse.x,mouse.y) } onDoubleClicked: { //maxButton.onClicked(); if(maxButton.bMax) { root.showNormal(); } else { root.showMaximized(); } maxButton.bMax = !maxButton.bMax; } onPositionChanged: { //鼠标偏移量 var delta =Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y) //如果mainwindow继承自QWidget,用setPos root.setX(root.x+delta.x) root.setY(root.y+delta.y) } } //maxButton为最大化按钮的id

上面无边框界面大家也看到了 有中文、英文，下一篇我们实现QML之翻译，能实时切换显示语言不重启程序，是不是比QWidget更有优势，赶紧学习起来。