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

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

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

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

/*--main.qml--*/
importQtQuick2.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)
}
}
}

 

效果如下：

添加关闭按钮

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