Folioscope

プログラミング/Unix系/デザイン/CG などのメモがもりもり

QMLでウィンドウっぽく

f:id:ibenza:20120617010751p:plain,right
QtQuickの開発が進んで, QMLも充実してきました.
Introduction to Qt Quick | Documentation | Qt Developer Network
Qtの方針も, (簡単な)UIはQMLで, 高度なロジックはC++でするという方針なようです.
なにより綺麗なUIが容易に作成できるというのが大きな強みです.

今回はQMLで書いたものをウィンドウっぽいものを作ります.

QMLの表示はQDeclarativeViewで行います.
普通にQDeclarativeViewでQMLファイルを表示するとこうなります.
f:id:ibenza:20120617010805p:plain
ここから背景を透過しフレームを消します.

QDeclarativeView view("main.qml");
viewer.setWindowFlags(Qt::FramelessWindowHint);
viewer.setAttribute(Qt::WA_TranslucentBackground);
viewer.viewport()->setAttribute(Qt::WA_TranslucentBackground);

QDeclarativeViewはQAbstractScrollAreaを継承しているので, 背景を透過するにはQAbstractScrollArea::viewport()でスクロールエリアのQWidgetも透過する必要があります.
これによりQMLのみの表示を行うことができます.
f:id:ibenza:20120617010815p:plain