2分六合

  • 热门专题

QML之窗口(无边框、透明及拖拽)

作者:dios51  发布日期:2014-05-10 08:22:55
Tag标签:  
  • 1.无边框

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

    无边框窗口代码如下:

    QQuickView viwer;
    //QQuickView继承自QWindow而不是QWidget
    viwer.setFlags(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<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.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)
            }
        }
    }

    效果如下:

    wKioL1NsZ1-joasAAAC3pD_1OfM683.jpg

    添加关闭按钮

     

     

     

    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()
                }
            }
        }
    }

    运行效果如图:

    wKioL1NsrUiRr2_FAADSQJplZ7s887.jpg

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规

    1. <form id='aztfr'></form>
        <bdo id='aztfr'><sup id='aztfr'><div id='aztfr'><bdo id='aztfr'></bdo></div></sup></bdo>