Qt のアプリケーションを作ってみる（４）

前回、クリックすると背景色とテキストを変えるアプリケーションを作りました。今回はクリックで画像を移動するアプリケーションを作ってみたいと思います。

まず、前回作成した Rectangle を MouseArea ごとコピーをして左右に並べます。それぞれが画像を表示するためのエリアになります。




Rectangleは全部で３つで、Rectangle1、Rectangle2、Rectangle3 です。QMLファイルは下記のようになりました。





動きをつけるために、StateGroup という属性をQMLファイルに追加します。ここに画像を移動するための記述を加えます。





MouseAreaがクリックされた時に、どのStateに移動するかを各Rectangleの属性に記述します。





それでは、アプリを起動してみましょう。





左をクリックしてみます。





右をクリックしてみます。





期待通りにアプリケーションが動いてくれました。本当に簡単に動きがつけられますね。QMLの仕様が秀逸です。Qtなかなか使えそうです。Tutorial を読んでいたら、画像の移動時にアニメーションが付け加えられることも分かりました。次はアニメーションでアプリに味付けしてみたいと思います！
（＾_＾）／～


関連記事
Qt のアプリケーションを作ってみる（３）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-22

Qt のアプリケーションを作ってみる（２）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-21

Qt のアプリケーションを作ってみる（１）
http://makers-with-myson.blog.so-net.ne.jp/2014-09-20

---

Application Development with Qt Creator

• 出版社/メーカー: Packt Publishing
• 発売日: 2013/11/20
• メディア: Kindle版

OpenGL Tutorials using Qt4

• 出版社/メーカー: Omid Sakhi
• 発売日: 2013/11/10
• メディア: Kindle版

Qt QuickではじめるクロスプラットフォームUIプログラミング

• 作者: 折戸孝行
• 出版社/メーカー: アスキー・メディアワークス
• 発売日: 2013/08/01
• メディア: 大型本

---

タグ：Qt