QML

QtQuickをインポート長方形{ id: canvas width: 250 height: 200 color: "blue"画像{ id: logo source : "pics/logo.png" anchors.centerIn: parent x : canvas.height / 5 } }

オブジェクトは、型に続いて中括弧で指定します。オブジェクトの型は常に大文字で始まります。上記の例では、Rectangle と、その子オブジェクトである Image の 2 つのオブジェクトがあります。中括弧の間には、オブジェクトのプロパティなどの情報を指定できます。プロパティは、プロパティ: 値の形式で指定します。上記の例では、Image には という名前のプロパティがありsource、値 が割り当てられていますpics/logo.png。プロパティとその値はコロンで区切られます。

idプロパティ

各オブジェクトには、IDと呼ばれる特別な一意のプロパティを割り当てることができます。IDを割り当てることで、他のオブジェクトやスクリプトからそのオブジェクトを参照できるようになります。以下の最初のRectangle要素には、ID が割り当てられていますmyRect。2番目のRectangle要素は、を参照することで独自の幅を定義しておりmyRect.width、最初のRectangle要素と同じ幅の値になります。

アイテム{長方形{ id: myRect幅: 120高さ: 100 }長方形{幅: myRect . width高さ: 200 } }

IDは小文字またはアンダースコアで始まり、文字、数字、アンダースコア以外の文字を含めることはできません。

プロパティバインディングは、プロパティの値を宣言的に指定します。リアクティブプログラミングのパラダイムに従い、他のプロパティやデータ値が変更されると、プロパティの値が自動的に更新されます。

QMLでは、プロパティにJavaScript式が割り当てられると、プロパティバインディングが暗黙的に作成されます。以下のQMLでは、2つのプロパティバインディングを使用して、矩形のサイズをotherItemのサイズに接続しています。

長方形{幅: otherItem.width高さ: otherItem.height }​

QMLは標準規格に準拠したJavaScriptエンジンを拡張しているため、有効なJavaScript式であれば何でもプロパティバインディングとして使用できます。バインディングはオブジェクトのプロパティにアクセスしたり、関数呼び出しを行ったり、DateやMathといったJavaScriptの組み込みオブジェクトを使用することも可能です。

長方形{ function calculateMyHeight () { return Math . max ( otherItem . height , thirdItem . height ); } anchors.centerIn: parent width: Math . min ( otherItem . width , 10 ) height: calculateMyHeight () color: width > 10 ? "blue" : "red" }

状態とは、プロパティの変化を意味的な単位として組み合わせるための仕組みです。例えば、ボタンには押下状態と非押下状態があり、アドレス帳アプリケーションには連絡先の読み取り専用状態と編集状態があります。すべての要素には「暗黙の」基本状態があります。その他のすべての状態は、基本状態と異なる要素のプロパティと値を列挙することで記述されます。

例：デフォルトの状態では、myRectは(0,0)の位置にあります。「移動」状態では、50,50の位置にあります。マウスカーソルの領域内をクリックすると、状態がデフォルトの状態から「移動」状態に変わり、長方形が移動します。

QtQuickをインポートアイテム{ id: myItem width: 200 ; height: 200 }長方形{ id: myRect width: 100 ; height: 100 color: "red" } states: [ State { name: "moved" PropertyChanges { target: myRect x: 50 y: 50 } } ] MouseArea { anchors.fill: parent onClicked: myItem . state = 'moved' } }

状態変化はトランジションを使用してアニメーション化できます。

例えば、上記のItem要素にこのコードを追加すると、「移動済み」状態への遷移がアニメーション化されます。

トランジション: [トランジション{開始: "*"終了: "moved"数値アニメーション{プロパティ: "x,y" ;期間: 500 } } ]

QMLにおけるアニメーションは、オブジェクトのプロパティをアニメーション化することによって実現されます。real、int、color、rect、point、size、vector3d型のプロパティはすべてアニメーション化可能です。

QMLは、基本的なプロパティアニメーション、トランジション、プロパティ動作という3つの主要なアニメーション形式をサポートしています。

最もシンプルなアニメーション形式は PropertyAnimation であり、これは上記に挙げたすべてのプロパティタイプをアニメーション化できます。プロパティアニメーションは、プロパティのアニメーション構文を使用して値ソースとして指定できます。これは、繰り返しアニメーションを実行する場合に特に便利です。

次の例は、跳ね返る効果を生み出します。

長方形{ id: rect width: 120 ; height: 200 }画像{ id: img source: "pics/qt.png" x: 60 - img . width / 2 y: 0SequentialAnimation on y { loops: Animation . Infinite NumberAnimation { to: 200 - img . height ; easing.type: Easing . OutBounce ; duration: 2000 } PauseAnimation { duration: 1000 } NumberAnimation { to: 0 ; easing.type: Easing . OutQuad ; duration: 1000 } } } }

QMLは、Qtの以下の概念に直接アクセスできます。

• QObjectシグナル – JavaScriptのコールバックをトリガーできる
• QObjectスロット – JavaScriptで呼び出す関数として利用可能
• QObjectのプロパティ – JavaScriptの変数として、またバインディングに使用できます。
• QWindow – ウィンドウ内にQMLシーンを作成する
• Q*Model – データバインディングで直接使用されます (例: QAbstractItemModel) ^{[ 29 ] [ 30 ] [ 31 ]}

シグナルハンドラは、イベントに応じて命令的なアクションを実行できるようにするJavaScriptのコールバックです。たとえば、MouseArea要素には、マウスの押下、解放、クリックを処理するシグナルハンドラがあります。

MouseArea { onPressed : console.log ( "マウスボタンが押されました" ) }

すべてのシグナルハンドラ名は「on」で始まります。

• QMLとC++の統合
• Qt QMLモジュールが提供する重要なC++クラス