Apr 232012
 

動作確認環境:Qt 4.8.1 / Qt Creator 2.4.1 / Windows XP

Qt Quickアプリケーションの作り方を学んでいくにあたって、まずはボタンを作ってみることにする。
はじめに、QtCreatorで Qt Quickアプリケーション のプロジェクトを作成する。
次に、そのプロジェクトにQMLファイルを新規作成する。名前は「Button.qml」とする。
QMLは以下のように記述する。

最もシンプルに書くならばこのような感じになるだろう。
4行目でRectangleエレメントの中にbuttonoClick()というシグナルを定義し、
6行目でMouseAreaが全体に有効になるよう配置する。
MouseAreaがクリックされるとbuttonClick()シグナルが発生するようになっている。

それでは、このボタンをメイン側で使ってみる。
QtCreaterでQt Quickのプロジェクトを作った場合はmain.qmlというファイルができているはずなので、
そこへ以下のように記述する。

このように、同じフォルダ内にqmlファイルがある場合は、その名前を宣言して配置することができる。
Button.qml内でbuttonClick()というシグナルを定義しておいたので、
onButtonClickという名前のプロパティが使えるようになっている。
ここにボタンが押されたときの処理を記述すれば良い。
今回は単純にログにメッセージを出力しているだけである。

このプログラムを実行すると以下のようになる。

緑色の四角形に表示された部分をマウスでクリックすると
コンソールログに「button clicked!」と表示されるだろう。