So-net無料ブログ作成
検索選択

Qt のアプリケーションを作ってみる(4) [ソフトウェア関連のもろもろ]

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

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

1_AddRectangles.png


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


2_ModifiedQml.png


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


3_AddStateGroup.png


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


4_ModifiedRectangles.png


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


5_AppBeforeClicked.png


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


6_AppAfterLeftClick.png


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


7_AppAfterRightClick.png


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


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

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

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





Application Development with Qt Creator

Application Development with Qt Creator




OpenGL Tutorials using Qt4

OpenGL Tutorials using Qt4

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



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

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

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




タグ:Qt
nice!(34)  コメント(0)  トラックバック(0) 

nice! 34

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0