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

开发环境：Win7  Qt5.2.1

1.无边框  

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

无边框窗口代码如下：

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

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

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

2.窗口透明

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

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

3.拖拽窗口

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

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

   main.cpp如下

，

/*---main.cpp---*/
# include
# include
# include
# include
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
# include
# include
# include
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.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)
        }
    }
}

   效果如下：

添加关闭按钮

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