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

1.无边框

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

无边框窗口代码如下：

1.QQuickView viwer;

2.//QQuickView继承自QWindow而不是QWidget

3.viwer.setFlags(Qt::FramelessWindowHint);

 

2.窗口透明

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

1.//设置窗口颜色，以下为透明，在viwer.setSource()之前使用

2.viwer.setColor(QColor(Qt::transparent));

3.//QWidget用setAttribute(Qt::WA_TranslucentBackground,true)

 

3.拖拽窗口

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

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

main.cpp如下

，

/*---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();}

/*---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如下即可实现透明，无边框，可拖拽

 

/*--main.qml--*/import QtQuick 2.0Rectangle {    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)        }    }}

效果如下：

添加关闭按钮

 

 

 

01.import QtQuick 2.0

02.Rectangle {

03.    width: 300

04.    height: 200

05.    //灰色0.9透明度

06.    color:Qt.rgba(0.5,0.5,0.5,0.9)

07.    MouseArea {

08.        id: dragRegion

09.        anchors.fill: parent

10.        property point clickPos:"0,0"

11.        onPressed: {

12.            clickPos  = Qt.point(mouse.x,mouse.y)

13.            }

14.        onPositionChanged: {

15.        //鼠标偏移量

16.        var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)

17.        //如果mainwindow继承自QWidget,用setPos

18.        mainwindow.setX(mainwindow.x+delta.x)

19.        mainwindow.setY(mainwindow.y+delta.y)

20.        }

21.    }

22.    //要置于MouseArea之后，否则无法响应鼠标点击

23.    Rectangle{

24.        id:closeBtn

25.        height: 25

26.        width: 25

27.        anchors.right: parent.right

28.        anchors.rightMargin: 5

29.        anchors.top: parent.top

30.        anchors.topMargin: 5

31.        color:"#aaff0000"

32.        Text{

33.            text:"x"

34.            anchors.centerIn: parent

35.        }

36.        MouseArea{

37.            anchors.fill: parent

38.            onClicked:

39.            {

40.                //Qt.quit()无法关闭窗口

41.                mainwindow.close()

42.            }

43.        }

44.    }

45.}

运行效果如图：

转载：http://www.it165.net/pro/html/201405/13527.html