首页 > 代码库 > QML之窗口(无边框、透明及拖拽)

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

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


本文出自 “水水的菜鸟” 博客,请务必保留此出处http://cpp51.blog.51cto.com/5346598/1408999