QML之窗口（无边框、透明及拖拽）

开发环境：Win7  Qt5.2.1

1.无边框  

   Qt Quick 2.0 中 QQuickView代替了1.0中的QDeclarativeView。

无边框窗口代码如下：

1 2 3

QQuickView viwer; //QQuickView继承自QWindow而不是QWidget viwer.setFlags(Qt::FramelessWindowHint);

   这样窗口实现了无边框，但是程序将不会依附在任务栏，如果想同时无边框且图标依附到任务栏，则应该如下设置:

1	setWindowFlags(Qt::Window|Qt::FramelessWindowHint);

2.窗口透明

   setOpacity可设置整个窗口（包括控件）的透明度，而背景透明则应使用setColor

1 2 3

//设置窗口颜色，以下为透明，在viwer.setSource()之前使用 viwer.setColor(QColor(Qt::transparent)); //QWidget用setAttribute(Qt::WA_TranslucentBackground,true)

3.拖拽窗口

   拖拽窗口需要将窗口（viewer）设置为qml中的属性

1	viwer.rootContext()->setContextProperty( "mainwindow" ,&viwer);

   main.cpp如下

，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/*---main.cpp---*/ # include <QApplication> # include <QQuickView> # include <QColor> # include <QQmlContext> int  main( int  argc,char* argv[]) {      QApplication app(argc,argv);      QQuickView viwer;      //无边框，背景透明      viwer.setFlags(Qt::FramelessWindowHint);      viwer.setColor(QColor(Qt::transparent));      //加载qml，qml添加到资源文件中可避免qml暴露      viwer.setSource(QUrl( "qrc:/qml/main.qml" ));      viwer.show();      //将viewer设置为main.qml属性      viwer.rootContext()->setContextProperty( "mainwindow" ,&viwer);      return  app.exec(); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

/*---main.cpp---*/ # include <QApplication> # include <QQuickView> # include <QColor> # include <QQmlContext> int  main( int  argc,char* argv[]) {      QApplication app(argc,argv);      QQuickView viwer;      //无边框，背景透明      viwer.setFlags(Qt::FramelessWindowHint);      viwer.setColor(QColor(Qt::transparent));      //加载qml      viwer.setSource(QUrl( "qrc:/qml/main.qml" ));      viwer.show();      //将viewer设置为main.qml属性      viwer.rootContext()->setContextProperty( "mainwindow" ,&viwer);      return  app.exec(); }

   此时，main.qml如下即可实现透明，无边框，可拖拽

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/*--main.qml--*/ import  QtQuick  2.0 Rectangle {      width:  300      height:  200                                                                                                                                                                     //灰色0.9透明度      color:Qt.rgba( 0.5 , 0.5 , 0.5 , 0.9 )      MouseArea {          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)          //如果mainwindow继承自QWidget,用setPos          mainwindow.setX(mainwindow.x+delta.x)          mainwindow.setY(mainwindow.y+delta.y)          }      } }

   效果如下：

添加关闭按钮

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

import QtQuick 2.0 Rectangle {      width: 300      height: 200      //灰色0.9透明度      color:Qt.rgba(0.5,0.5,0.5,0.9)      MouseArea {          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)          //如果mainwindow继承自QWidget,用setPos          mainwindow.setX(mainwindow.x+delta.x)          mainwindow.setY(mainwindow.y+delta.y)          }      }      //要置于MouseArea之后，否则无法响应鼠标点击      Rectangle{          id:closeBtn          height: 25          width: 25          anchors.right: parent.right          anchors.rightMargin: 5          anchors.top: parent.top          anchors.topMargin: 5          color: "#aaff0000"          Text{              text: "x"              anchors.centerIn: parent          }          MouseArea{              anchors.fill: parent              onClicked:              {                  //Qt.quit()无法关闭窗口                  mainwindow.close()              }          }      } }

运行效果如图：

本文出自 “大耳” 博客，请务必保留此出处http://cpp51.blog.51cto.com/5346598/1408999