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

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

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

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

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

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

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

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

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

我的实现方式

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

代码实现如下

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两行代码就能搞定无边框显示 还不影响以前已经实现的代码 是不是特别简单。

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

分别加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更有优势，赶紧学习起来。