¿Cómo hacer una ventana transparente con Qt Quick?

Question

¿Hay alguna manera de hacer transparente la ventana de una aplicación qml?

Estoy buscando descripción detallada sobre cómo dibujar formas simples con qml mientras que hace transparente la ventana de la aplicación, así como el fondo. Una demostración de código fuente que funcione sería increíble.

Answer 1

Finalmente encontré una forma simple de dibujar un par de rectángulos rojos/azules mientras dejaba la ventana transparente.

draw_rectangles.qml

import Qt 4.7 

Item { 
    Rectangle { 
     opacity: 0.5 
     color: "red" 
     width: 100; height: 100 
     Rectangle { 
      color: "blue" 
      x: 50; y: 50; width: 100; height: 100 
     } 
    } 
} 

win.cpp:

#include <QApplication> 
#include <QDeclarativeView> 
#include <QMainWindow> 

int main(int argc, char *argv[]) 
{ 
    QApplication app(argc, argv); 
    QMainWindow window; 

    QDeclarativeView* v = new QDeclarativeView; 
    window.setCentralWidget(v); 

    v->setSource(QUrl::fromLocalFile(("draw_rectangles.qml"))); 

    window.setStyleSheet("background:transparent;"); 
    window.setAttribute(Qt::WA_TranslucentBackground); 
    window.setWindowFlags(Qt::FramelessWindowHint); 
    window.show(); 

    return app.exec(); 
} 

win.pro:

TEMPLATE += app 
QT += gui declarative 
SOURCES += win.cpp 

Guarde estos archivos en el mismo directorio y ejecute qmake seguido de make para compilar la aplicación.

Answer 2

Aquí está un ejemplo simple:

main.cpp:

#include <QtGui/QApplication> 
#include "mainwindow.h" 

int main(int argc, char *argv[]) 
{ 
    QApplication a(argc, argv); 
    MainWindow w; 
    w.show(); 

    return a.exec(); 
} 

mainwindow.h:

#ifndef MAINWINDOW_H 
#define MAINWINDOW_H 

#include <QDeclarativeView> 

class MainWindow : public QDeclarativeView 
{ 
    Q_OBJECT 

public: 
    MainWindow(QWidget *parent = 0); 
    ~MainWindow(); 
}; 

#endif // MAINWINDOW_H 

mainwindow.cpp:

#include "mainwindow.h" 

MainWindow::MainWindow(QWidget *parent) 
    : QDeclarativeView(parent) 
{ 
    // transparent background 
    setAttribute(Qt::WA_TranslucentBackground); 
    setStyleSheet("background:transparent;"); 

    // no window decorations 
    setWindowFlags(Qt::FramelessWindowHint); 

    // set QML file 
    setSource(QUrl("main.qml")); 
} 

MainWindow::~MainWindow() 
{ 
} 

main.qml

import QtQuick 1.0 

Rectangle { 
    id: root 

    width: 250 
    height: 250 

    // completely transparent background 
    color: "#00FFFFFF" 

    border.color: "#F00" 
    border.width: 2 

    Rectangle { 
     id: ball 

     height: 50; width: 50 
     x: 100 

     color: "#990000FF" 
     radius: height/2 
    } 

    SequentialAnimation { 
     running: true; loops: Animation.Infinite 
     NumberAnimation { target: ball; property: "y"; to: root.height - ball.height; duration: 1000; easing.type: Easing.OutBounce } 
     PauseAnimation { duration: 1000 } 
     NumberAnimation { target: ball; property: "y"; to: 0; duration: 700 } 
     PauseAnimation { duration: 1000 } 
    } 
} 

transp-qml.pro

QT += core gui declarative 

TARGET = transp-qml 
TEMPLATE = app 


SOURCES += main.cpp\ 
      mainwindow.cpp 

HEADERS += mainwindow.h 

OTHER_FILES += main.qml 

captura de pantalla de resultado:

Answer 3

A partir de al menos 5,3 Qt no es necesario nada tan elaborado como en las respuestas anteriores: hecho

Window { 
    flags: Qt.ToolTip | Qt.FramelessWindowHint | Qt.WA_TranslucentBackground 

    color: "#00000000" 

de empleo. (Es posible que desee cambiar ToolTip. Lo estoy usando porque estoy haciendo información sobre herramientas.)

Answer 4

Estoy usando Qt 5.3 con C++ y QML y encontré que necesitaba llamar al QQuickWindow::setDefaultAlphaBuffer. Esto tiene que hacerse antes de crear el primer QQuickWindow, entonces en C++, no en QML.La ventana color y flags probablemente se podría establecer en QML, pero optaron por poner todo el código de transparencia winow en un solo lugar, así:

QQuickView view; 
QQuickWindow::setDefaultAlphaBuffer(true); 
view.setColor(Qt::transparent); 
view.setFlags(m_View.flags() | 
       static_cast<Qt::WindowFlags>(Qt::WA_TranslucentBackground));