c++ - transparentes - ¿Cómo hacer una ventana transparente con Qt Quick?

menu inicio transparente windows 10

Question

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

Estoy buscando una descripción detallada sobre cómo dibujar formas simples con qml al mismo tiempo que transparenta la ventana de la aplicación, así como también el fondo. Una demostración de código fuente que funcione sería increíble.

Answer 1

Aquí hay 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 del resultado:

Answer 2

Estoy usando Qt 5.3 con C ++ y QML y encontré que necesitaba llamar a QQuickWindow::setDefaultAlphaBuffer . Esto debe hacerse antes de crear el primer QQuickWindow , por lo tanto, en C ++, no en QML. El color ventana y las flags probablemente podrían establecerse en QML, pero opté por poner todo el código para la transparencia de winow en un lugar como este:

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

Answer 3

Finalmente encontré una manera 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 4

Por lo menos Qt 5.3 no necesita nada tan elaborado como en las respuestas anteriores:

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

    color: "#00000000"

Trabajo hecho. (Es posible que desee cambiar la ToolTip . La estoy usando porque estoy creando información sobre herramientas).