QML之視窗（無邊框、透明及拖拽）
阿新 • • 發佈：2019-01-03
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.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)
}
}
}
效果如下：
新增關閉按鈕
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