SSブログ

Qt のアプリケーションを作ってみる(3) [ソフト一般]

前回作ったQtアプリケーションに簡単なアクションを付け加えたいと思います。画像をクリックするとウィンドウの背景とテキストを変更してみます。

まず画像のエリアに矩形のウィンドウを設定します。左のエレメントからRectangle オブジェクトをドラッグ&ドロップで画像と同じ領域に設定します。


1_AddRectangle.png


次に、同じくエレメントからMouseAreaをドラッグ&ドロップをしてRectangleオブジェクトに被せます。ナビゲータウィンドウで「mouseArea1」が「rectangle1」の子要素になっているのが味噌です。

2_AddMouseArea.png


次にQMLファイルを編集します。赤字が修正を加えたところです。MouseAreaでClickedが発生すると、ウインドウの背景色とテキストを変更するように記述してみました。赤文字が自動生成ファイルから編集を加えた部分です。


3_ModifiedQml.png


それではアプリケーションを起動してみましょう。初期状態は背景はグレイです。

4_AppBeforeClick.png


画像をクリックすると、、、

5_AppAfterClick.png


きちんと期待通りの動作をさせることができました。

ここまでC++のコードを一切編集していません。リソースの編集もAndroidよりも直感的にできますし、かなり整理された仕様であると感じました。なかなか期待できるテクノロジーです。

次は、クリックで画像を移動させるようにアプリケーションを進化させたいと思います。
(^_^)/~


関連記事
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

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



Qt Quick

Qt Quick

  • 作者:
  • 出版社/メーカー: Book on Demand Ltd.
  • 発売日: 2013/01/19
  • メディア: ペーパーバック



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

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

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




タグ:Qt
nice!(31)  コメント(0)  トラックバック(0) 
共通テーマ:趣味・カルチャー

nice! 31

コメント 0

コメントを書く

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

トラックバック 0