web-dev-qa-db-ja.com

Qt Quickで透明なウィンドウを作成するにはどうすればよいですか？

qmlアプリケーションのウィンドウを透過的にする方法はありますか？

アプリケーションのウィンドウと背景を透明にしながら、qmlで単純な形状を描画する方法について詳細な説明を探しています。実用的なソースコードのデモは素晴らしいでしょう。

c++qttransparentqmlqt-quick
22
karlphillip

私はついに、ウィンドウを透明にしたまま、赤/青の長方形をいくつか描く簡単な方法を見つけました。

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

これらのファイルを同じディレクトリに保存し、qmakeを実行してからmakeを実行してアプリケーションをコンパイルします。

10
karlphillip

簡単な例を次に示します。

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

結果のスクリーンショット：

screenshot

22
hiddenbit

少なくともQt5.3の時点では、前の回答ほど複雑なものは必要ありません。

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

    color: "#00000000"

仕事は終わりました。 （ToolTipを変更することをお勧めします。ツールチップを作成しているため、これを使用しています。）

19
Timmmm

C++とQMLの両方でQt5.3を使用していますが、 QQuickWindow :: setDefaultAlphaBuffer を呼び出す必要があることがわかりました。これは、最初のQQuickWindowを作成する前に行う必要があるため、C++ではQMLではありません。ウィンドウcolorとflagsはおそらくQMLで設定できますが、次のように、ウィンドウの透過性に関するすべてのコードを1か所に配置することにしました。

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