コンポーネントとシグナルの接続
シグナルとハンドラのメカニズムにより、コンポーネントはシグナルで表されるアプリケーション・イベントに応答することができます。シグナルが発信されると、対応するシグナルハンドラが呼び出され、ハンドラ内に配置されたスクリプトやその他の操作によってイベントに応答します。
特定のコンポーネントに対して特定のシグナルが発せられたときに通知を受け取るには、コンポーネント定義でon<Signal>というシグナルハンドラを宣言します。シグナルハンドラには、シグナルハンドラが呼び出されたときに実行されるJavaScriptコードを記述します。
コンポーネントには、ユーザがアプリケーションとインタラクションするときに発行される、定義済みのシグナルがあります。例えば、マウスエリアコンポーネントには、clicked シグナルがあり、エリア内でマウスがクリックされるたびに発信されます。シグナル名はclicked であるため、このシグナルを受信するためのシグナルハンドラはonClicked という名前になります。
あるプロパティの値が変更されると、シグナルが自動的に発信されます。このタイプのシグナルはプロパティ変更シグナルで、これらのシグナルのシグナル・ハンドラはon<Property>Changed という形式で記述されます。<プロパティ>はプロパティの名前で、最初の文字は大文字になります。
例えば、Mouse Area コンポーネントにはpressed プロパティがあります。このプロパティが変更されるたびに通知を受け取るには、onPressedChanged というシグナル・ハンドラを使用します。
シグナルとシグナル・ハンドラの詳細については、シグナルとハンドラ・イベント・システムを参照してください。
接続の作成
コンテキストメニューを使用して、選択したコンポーネントを、アクションに接続したシグナルに接続することができます:
- Navigator または2D ビューで、接続したいコンポーネントを選択します。
- コンテキストメニューで、Connections >Add New Connection を選択し、利用可能なシグナル、アクション、アクションプロパティを選択します。
接続の追加
Connections ビューのConnections タブでも接続を追加できます。
コンポーネントを使用可能なシグナルに接続するには、以下の手順に従います:
- Navigator または2D ビューで、接続したいコンポーネントを選択します。
- Connections ビューのConnections タブを開きます。

(Add) を選択して、接続エディタで接続を作成します。
シグナルをアクションに接続する
シグナルをアクションに接続するには
- 接続を選択または作成して、接続エディタを開きます。

接続エディタ。
- Target で、コンポーネントを選択する。
- Signal で、発信するシグナルを選択します。
- Action で、シグナル発信時に適用するアクションを選択します。
接続のプロパティは、選択したアクションに依存します:
- Call Function 呼び出す関数を設定します。
- Assign ソースとターゲットのプロパティを設定します。
- Change State 状態グループ内のターゲット状態を設定します。
- Set Property コンポーネントプロパティを設定します。
- Print Message 表示するテキストを設定します。
条件の追加
接続エディタを使用して、条件付きアクションのJavaScript式を作成します。アクションはコンポーネントをシグナルに接続しますが、コンディションは他のコンポーネントからプロパティ値を取得し、互いに比較します。その後、JavaScript式を使用してコンポーネントを変更できます。
選択したアクションにロジックを追加するには、Add Condition を選択します。

else ステートメントを含めるには、Add Else Statement を選択します。
複雑な条件文を使用するには:
- {} を選択してAction Editor を開きます。
- JavaScript ステートメントを入力します。
- ダイアログを閉じて、変更を適用します。
条件式を作成するために使用できる論理演算子の詳細については、論理演算子の概要を参照してください。
JavaScript 式の作成
接続エディタでアクションのJavaScript式を作成するには、次の手順に従います:
- コンポーネントシグナルをアクションに接続します。

- {} を選択してAction Editor ビューを開き、コンポーネントと論理式で JavaScript 式を記述します。

注: 接続エディタでは、単一レベルのif-else式しか作成できません。ネストされた式を作成するには、{} を選択します。
コードへのジャンプ
Code ビューのコードに移動するには、接続エディタで
(Jump to the code) を選択します。
接続の削除
接続を削除するには、Connections で接続を選択し、
(Remove) を選択します。
接続の動作を見る
Connection ビューのワークフローの実践的な例については、このビデオをご覧ください:
How toもご覧ください: UI コンポーネントの使用法、Qt Quick UI デザイン、 Qt Quick UI のデザインも参照してください。
Copyright © The Qt Company Ltd. and other contributors. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.