Làm cách nào để tạo cửa sổ trong suốt với Qt Quick?

Question

Có cách nào để làm cho cửa sổ của ứng dụng qml trong suốt không?

Tôi đang tìm kiếm mô tả chi tiết về cách vẽ các hình dạng đơn giản với qml trong khi làm cho cửa sổ của ứng dụng trong suốt, cũng như nền. Một bản demo mã nguồn làm việc sẽ là tuyệt vời.

Answer 1

Cuối cùng tôi đã tìm thấy một cách đơn giản để vẽ một vài hình chữ nhật màu đỏ/xanh trong khi để cửa sổ trong suốt.

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:

012.351.

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

Lưu các tệp này vào cùng một thư mục và thực hiện qmake theo sau là make để biên dịch ứng dụng.

Answer 2

Dưới đây là một ví dụ đơn giản:

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 

ảnh chụp màn hình kết quả:

Answer 3

Tính đến ít nhất Qt 5.3 bạn không cần bất cứ điều gì như phức tạp như trong các câu trả lời theo thời gian: làm

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

    color: "#00000000" 

Job. (Bạn có thể muốn thay đổi ToolTip. Tôi đang sử dụng nó vì tôi đang tạo chú giải công cụ.)

Answer 4

Tôi đang sử dụng Qt 5.3 với cả C++ và QML và thấy rằng tôi cần gọi QQuickWindow::setDefaultAlphaBuffer. Điều này phải được thực hiện trước khi tạo QQuickWindow đầu tiên, vì vậy trong C++, không phải QML.Cửa sổ color và flags có thể có thể được thiết lập trong QML, nhưng tôi chọn để đặt tất cả các mã cho minh bạch winow ở một nơi như vậy:

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