1. 程式人生 > >利用QML實現透明視窗[qt5]

利用QML實現透明視窗[qt5]

<p>mainwindow.h</p>
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QDeclarativeView>

class MainWindow: public QDeclarativeView
{
    Q_OBJECT
public:
    MainWindow(QWidget * p=0);
    ~MainWindow();
};

#endif

mainwindow.cpp

#include "mainwindow.h"

MainWindow::MainWindow(QWidget *p)
    :QDeclarativeView(p)
{
    // transparent background
    this->setAttribute(Qt::WA_TranslucentBackground);
    this->setStyleSheet("background: transparent;");

    // no window decorations

    setWindowFlags(Qt::FramelessWindowHint);

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

MainWindow::~MainWindow()
{

}


main.pro

QT += core gui widgets declarative 

TARGET = main
TEMPLATE = app


SOURCES += main.cpp\
            mainwindow.cpp

HEADERS += mainwindow.h

OTHER_FILES += main.qml


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 }
    }
}



main.cpp
//ref: http://stackoverflow.com/questions/7613125/how-to-make-a-transparent-window-with-qt-quick
//#include <QtGui/QApplication>
#include <QApplication>

#include "mainwindow.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    MainWindow w;

    w.show();

    return a.exec();
}