前回、クリックすると背景色とテキストを変えるアプリケーションを作りました。今回はクリックで画像を移動するアプリケーションを作ってみたいと思います。
まず、前回作成した 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
まず、前回作成した 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版
Qt QuickではじめるクロスプラットフォームUIプログラミング
- 作者: 折戸孝行
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/08/01
- メディア: 大型本