Qt Quick 入門

Qt Quick 入門 第10回: プロパティバインディング

Published Wednesday April 27th, 2011 | Leave a comment
Posted in Qt Quick 入門 | Tags: ,

今回は QML の [qt ‘プロパティ’ l=qdeclarativeintroduction m=#properties] とその重要な特徴である「[qt “プロパティバインディング” l=propertybinding]」に関する説明します。 プロパティの設定方法 これまでの連載でもプロパティを使ってきましたが、改めて QML でのプロパティの設定方法についておさらいしてみましょう。 QML では基本的に、各要素のプロパティを以下のように ‘:’ を使って設定します。このプロパティの設定方法は JSON の書式とよく似ています。 Rectangle { width: 360 height: 360 } この例では即値で指定していますが、プロパティに設定できるのは JavaScript の式となります。以下にその例を挙げてみましょう。 Rectangle { x: 10 y: otherItem.y width: 2 * otherItem.width height: Math.max(otherItem.height, 50) color: height > 100 ? “lightgreen” : “lightred” border.width: { if (withBorder) […]

Read More

Qt Quick 入門 第9回: Qt Quick デザイナの使い方

Published Thursday March 31st, 2011 | 2 Comments on Qt Quick 入門 第9回: Qt Quick デザイナの使い方
Posted in Qt Quick 入門 | Tags: , ,

Qt Creator 2.1がリリース されました。これまでもこの連載ではベータ版やリリース候補版を使ってきましたが、今回はいよいよ正式リリースとなった Qt Quick デザイナの使い方を説明します。 Qt Creator 2.1 の変更点 その前に、Qt Creator の 2.0 から 2.1 の変更点でこれまでの連載と関係する点を挙げておきます。 「QML アプリケーション」プロジェクトから「Qt Quick UI」プロジェクトへ名前を変更 「Qt Quick UI」プロジェクトのテンプレートとなる QML ファイルの内容の変更 C++ と QML を連携させて動作させるアプリケーションのテンプレートとなる「Qt Quick アプリケーション」プロジェクトが追加 QML ビューアのパスの指定は無くなり、プロジェクトで使用する Qt に含まれる QML ビューアを実行(このため、別途 Qt 自体のインストールが必須) このあたりでしょうか。これらの変更はリリース候補版の時点で行われていたので、気が付いていた方もいらっしゃるかと思います。これらはどれも複雑な変更ではありませんので、すぐになれると思います。より詳細な変更点に関しては リリースの記事 等を参考にしてください。 画面構成 それでは Qt Quick デザイナの画面構成から説明します。今回の説明は上記の変更点に含まれている新しいテンプレートの「Qt Quick UI」プロジェクトを使って行いますので、新しく「Qt Quick UI」プロジェクトを作成してください。作成された QML ファイルのコードは下記のものになっていると思います。 […]

Read More

Qt Quick 入門 第9回: Qt Quick デザイナの使い方

Published Thursday March 31st, 2011 | 2 Comments on Qt Quick 入門 第9回: Qt Quick デザイナの使い方
Posted in Qt Quick 入門 | Tags: , ,

Qt Creator 2.1がリリース されました。これまでもこの連載ではベータ版やリリース候補版を使ってきましたが、今回はいよいよ正式リリースとなった Qt Quick デザイナの使い方を説明します。 Qt Creator 2.1 の変更点 その前に、Qt Creator の 2.0 から 2.1 の変更点でこれまでの連載と関係する点を挙げておきます。 「QML アプリケーション」プロジェクトから「Qt Quick UI」プロジェクトへ名前を変更 「Qt Quick UI」プロジェクトのテンプレートとなる QML ファイルの内容の変更 C++ と QML を連携させて動作させるアプリケーションのテンプレートとなる「Qt Quick アプリケーション」プロジェクトが追加 QML ビューアのパスの指定は無くなり、プロジェクトで使用する Qt に含まれる QML ビューアを実行(このため、別途 Qt 自体のインストールが必須) このあたりでしょうか。これらの変更はリリース候補版の時点で行われていたので、気が付いていた方もいらっしゃるかと思います。これらはどれも複雑な変更ではありませんので、すぐになれると思います。より詳細な変更点に関しては リリースの記事 等を参考にしてください。 画面構成 それでは Qt Quick デザイナの画面構成から説明します。今回の説明は上記の変更点に含まれている新しいテンプレートの「Qt Quick UI」プロジェクトを使って行いますので、新しく「Qt Quick UI」プロジェクトを作成してください。作成された QML ファイルのコードは下記のものになっていると思います。 […]

Read More

Qt Quick 入門 第8回: QML の描画処理

Published Thursday March 10th, 2011 | Leave a comment
Posted in Qt Quick 入門 | Tags: ,

今回の「Qt Quick 入門」では、QML の各要素で共通する描画関連の処理やプロパティについて説明していきます。前回の「レイアウト」と合わせて、QML のレイアウトと描画に関する基本をマスターしましょう。 表示の優先順位 今まで、QML の各要素を表示する優先順位については、特に触れてきませんでした。前回の「レイアウト」で説明したような各要素が重ならない場合には、どの要素から描画されても問題ありません。また、親子関係にある要素では、子要素が優先されて前面に表示されます。このあたりは一般的なルールだと思います。 それでは、親子関係にはない複数の要素が互いに重なっていた場合、そのどちらが優先して表示されるのでしょうか。その場合、ソース内で後から定義された要素が優先されて前面に表示されます。たとえば、次の二つのリストを実行してみてください。 // リストA import Qt 4.7 Rectangle { width: 200; height: 200 Rectangle { id: rect1 x: 25; y: 25 width: 100; height: 100 color: “red” } Rectangle { id: rect2 x: 75; y: 75 width: 100; height: 100 color: “green” } } // リストB import Qt […]

Read More

Qt Quick 入門 第8回: QML の描画処理

Published Thursday March 10th, 2011 | Leave a comment
Posted in Qt Quick 入門 | Tags: ,

今回の「Qt Quick 入門」では、QML の各要素で共通する描画関連の処理やプロパティについて説明していきます。前回の「レイアウト」と合わせて、QML のレイアウトと描画に関する基本をマスターしましょう。 表示の優先順位 今まで、QML の各要素を表示する優先順位については、特に触れてきませんでした。前回の「レイアウト」で説明したような各要素が重ならない場合には、どの要素から描画されても問題ありません。また、親子関係にある要素では、子要素が優先されて前面に表示されます。このあたりは一般的なルールだと思います。 それでは、親子関係にはない複数の要素が互いに重なっていた場合、そのどちらが優先して表示されるのでしょうか。その場合、ソース内で後から定義された要素が優先されて前面に表示されます。たとえば、次の二つのリストを実行してみてください。 // リストA import Qt 4.7 Rectangle { width: 200; height: 200 Rectangle { id: rect1 x: 25; y: 25 width: 100; height: 100 color: “red” } Rectangle { id: rect2 x: 75; y: 75 width: 100; height: 100 color: “green” } } // リストB import Qt […]

Read More

Qt Quick 入門 第8回: QML の描画処理

Published Thursday March 10th, 2011 | Leave a comment
Posted in Qt Quick 入門 | Tags: ,

今回の「Qt Quick 入門」では、QML の各要素で共通する描画関連の処理やプロパティについて説明していきます。前回の「レイアウト」と合わせて、QML のレイアウトと描画に関する基本をマスターしましょう。 表示の優先順位 今まで、QML の各要素を表示する優先順位については、特に触れてきませんでした。前回の「レイアウト」で説明したような各要素が重ならない場合には、どの要素から描画されても問題ありません。また、親子関係にある要素では、子要素が優先されて前面に表示されます。このあたりは一般的なルールだと思います。 それでは、親子関係にはない複数の要素が互いに重なっていた場合、そのどちらが優先して表示されるのでしょうか。その場合、ソース内で後から定義された要素が優先されて前面に表示されます。たとえば、次の二つのリストを実行してみてください。 // リストA import Qt 4.7 Rectangle { width: 200; height: 200 Rectangle { id: rect1 x: 25; y: 25 width: 100; height: 100 color: “red” } Rectangle { id: rect2 x: 75; y: 75 width: 100; height: 100 color: “green” } } // リストB import Qt […]

Read More

Qt Quick 入門 第7回: レイアウト

Published Thursday January 6th, 2011 | Leave a comment
Posted in Qt Quick 入門 | Tags: ,

前回までの「Qt Quick 入門」で簡単な UI を Qt Quick で作成してアニメーションを設定する方法までを説明しました。やや駆け足で進めてきましたが、UI 作成の流れを理解していただけたでしょうか。今回からは、これまでの記事では説明を省略していた箇所や、説明に出てこなかった Qt Quick の詳細を学んでいただこうと思います。まずは QML における各要素のレイアウト方法を説明します。 QMLのレイアウト QML でレイアウトを行う際には大きく3つの方法があります。 各要素の座標やサイズを指定する アンカーレイアウトを使用する レイアウト要素を使用する 実際に UI を作成する際には、それぞれの方法を組み合わせて使用することになると思います。それぞれについて、下記で説明します。

Read More

Qt Quick 入門 第6回: アニメーション

Published Monday December 13th, 2010 | 3 Comments on Qt Quick 入門 第6回: アニメーション
Posted in Qt Quick 入門 | Tags:

前回の Qt Quick 入門「第5回: 状態遷移」では状態遷移を利用して画像の位置を変更しました。今回はその画像の移動にアニメーションを追加します。 アニメーション要素 QML でアニメーションを使うには [qml Animation] を継承している要素を用います。たとえば、画像などを移動する場合には数値を変化させてアニメーションを行う [qml NumberAnimation] を用います。代表的なアニメーション要素を以下に示します。 [qml PropertyAnimation] — プロパティの値を変更する汎用的なアニメーション [qml NumberAnimation] — 数値を変更するアニメーション [qml ColorAnimation] — 色を変化させるアニメーション [qml SequentialAnimation] — 複数のアニメーションを連続して実行する [qml ParallelAnimation] — 複数のアニメーションを平行して実行する [qml PauseAnimation] — 静止状態のアニメーション [qml ” x e=item] や [qml ” y e=item] プロパティを用いてある要素の位置を変化させる場合、アニメーションには通常 PropertyAnimation か NumberAnimation を使います。PropertyAnimation は汎用的なアニメーションのため、座標のような数値だけでなく、色なども変化させることが出来ます。それに対して NumberAnimation は数値の変化に特化したアニメーションです。基本的にはどちらを使っていただいてもかまいませんが、パフォーマンスを考慮する場合には […]

Read More

Qt Quick 入門 第5回: 状態遷移

Published Wednesday October 27th, 2010 | 1 Comment on Qt Quick 入門 第5回: 状態遷移
Posted in Qt Quick 入門 | Tags:

少し前ですが、Qt Creator 2.1 のベータ版がリリースされました。これから、RC を経て正式リリースされるわけですが、Qt Quick の環境がそろうまであと少しとなりました。これが Qt Quick の正式な始まりとなるわけです。今後の発展が楽しみなところです。 さて、前回の「Qt Quick 入門: 第4回 画像やマウスを使おう」では QML の基本的な要素である [qml Image] と [qml MouseArea] を使ってみました。今回の「Qt Quick 入門」では QML で動きのある UI を作成するのに便利な状態遷移を扱います。状態遷移を使うと、状態に応じて処理を行ったり、UI の部品を変更したりすることが簡単に出来るようになります。 今回は、前回作成した qml-example をベースに進めていきます。前回は「Click」ボタンをクリックするとログを出力しましたが、今回はクリック時の動作を変更して、Qt のロゴ画像を動かしてみましょう。 Qt Creator を立ち上げたら前回作成した qml-example プロジェクトをオープンして、qml-example.qml を読み込んでください。

Read More

Qt Quick 入門 第5回: 状態遷移

Published Wednesday October 27th, 2010 | Leave a comment
Posted in Qt Quick 入門 | Tags:

少し前ですが、Qt Creator 2.1 のベータ版がリリースされました。これから、RC を経て正式リリースされるわけですが、Qt Quick の環境がそろうまであと少しとなりました。これが Qt Quick の正式な始まりとなるわけです。今後の発展が楽しみなところです。 さて、前回の「Qt Quick 入門: 第4回 画像やマウスを使おう」では QML の基本的な要素である [qml Image] と [qml MouseArea] を使ってみました。今回の「Qt Quick 入門」では QML で動きのある UI を作成するのに便利な状態遷移を扱います。状態遷移を使うと、状態に応じて処理を行ったり、UI の部品を変更したりすることが簡単に出来るようになります。 今回は、前回作成した qml-example をベースに進めていきます。前回は「Click」ボタンをクリックするとログを出力しましたが、今回はクリック時の動作を変更して、Qt のロゴ画像を動かしてみましょう。 Qt Creator を立ち上げたら前回作成した qml-example プロジェクトをオープンして、qml-example.qml を読み込んでください。

Read More
Get started today with Qt Download now