Qt のアプリケーションを作ってみる(3) [ソフト一般]
前回作ったQtアプリケーションに簡単なアクションを付け加えたいと思います。画像をクリックするとウィンドウの背景とテキストを変更してみます。
まず画像のエリアに矩形のウィンドウを設定します。左のエレメントからRectangle オブジェクトをドラッグ&ドロップで画像と同じ領域に設定します。
次に、同じくエレメントからMouseAreaをドラッグ&ドロップをしてRectangleオブジェクトに被せます。ナビゲータウィンドウで「mouseArea1」が「rectangle1」の子要素になっているのが味噌です。
次にQMLファイルを編集します。赤字が修正を加えたところです。MouseAreaでClickedが発生すると、ウインドウの背景色とテキストを変更するように記述してみました。赤文字が自動生成ファイルから編集を加えた部分です。
それではアプリケーションを起動してみましょう。初期状態は背景はグレイです。
画像をクリックすると、、、
きちんと期待通りの動作をさせることができました。
ここまで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
まず画像のエリアに矩形のウィンドウを設定します。左のエレメントからRectangle オブジェクトをドラッグ&ドロップで画像と同じ領域に設定します。
次に、同じくエレメントからMouseAreaをドラッグ&ドロップをしてRectangleオブジェクトに被せます。ナビゲータウィンドウで「mouseArea1」が「rectangle1」の子要素になっているのが味噌です。
次にQMLファイルを編集します。赤字が修正を加えたところです。MouseAreaでClickedが発生すると、ウインドウの背景色とテキストを変更するように記述してみました。赤文字が自動生成ファイルから編集を加えた部分です。
それではアプリケーションを起動してみましょう。初期状態は背景はグレイです。
画像をクリックすると、、、
きちんと期待通りの動作をさせることができました。
ここまで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
- 出版社/メーカー: Packt Publishing
- 発売日: 2013/11/20
- メディア: Kindle版
Qt QuickではじめるクロスプラットフォームUIプログラミング
- 作者: 折戸孝行
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2013/08/01
- メディア: 大型本
タグ:Qt
コメント 0