2011-09-30 22 views
20

¿Hay alguna manera de hacer transparente la ventana de una aplicación qml?¿Cómo hacer una ventana transparente con Qt Quick?

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.

+1

soy un fan tuyo :) – Avelino

Respuesta

10

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

enter image description here

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.

+0

-1: Si bien es una buena demostración, no explica nada en absoluto. ¿Cuáles son los requisitos previos para la transparencia? En resumen: ¿qué hay que tocar para que funcione? Como es, no creo que sea útil en el futuro, pero a lo sumo en el momento. - editar: especialmente con respecto a su pregunta: "Estoy buscando una __descripción detallada__". –

21

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:

screenshot

+0

Gracias! Voy a +1 pero eso es una demostración compleja y ** qmake ** se queja 'ADVERTENCIA: no se ha encontrado: main.cpp'. – karlphillip

+1

@karlphillip: Vaya, se olvidó de publicar 'main.cpp';) – hiddenbit

13

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.)

+1

Vale la pena mencionar que esta solución funciona en mi programa solo con la configuración de DefaultAlphaBuffer en main.cpp: 'QQuickWindow :: setDefaultAlphaBuffer (true);' –

1

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)); 
Cuestiones relacionadas