アプリケーションとユーザーインターフェイスコンポーネントは、相互に通信する必要があります。たとえば、ボタンはユーザーがクリックしたことを認識する必要があります。ボタンの色を変更して、ステータスを示したり、ロジックを実行したりできます。同様に、アプリケーションはユーザーがボタンをクリックしているかどうかを知る必要があります。アプリケーションは、このクリックイベントを他のアプリケーションに中継する必要がある場合があります。
QMLにはシグナルとハンドラーのメカニズムがあり、シグナルはイベントであり、シグナルはシグナルハンドラーを介して応答します。シグナルが発行されると、対応するシグナルハンドラが呼び出されます。コンポーネントがイベントに応答できるように、スクリプトやその他の操作などのロジックをハンドラーに配置します。
シグナルハンドラーを使用してシグナルを受信する
特定のオブジェクトが特定のシグナルを発信したときに通知を受け取るには、オブジェクト定義で<Signal>で指定されたシグナルハンドラーを宣言する必要があります。<Signal>はシグナルの名前で、最初の文字を大文字にします。シグナルハンドラーには、シグナルハンドラーが呼び出されたときに実行されるJavaScriptコードが含まれている必要があります。
たとえば、Qtクイックコントロールモジュールのボタンタイプには、ボタンがクリックされたときに発生する信号があります。この場合、この信号を受信するための信号処理手順は必要です。次の例では、ボタンがクリックされるたびにハンドラーが呼び出され、ランダムな色が親の四角形に適用されます:clickedonClickedonClicked
import QtQuick 2.14 import QtQuick.Controls 2.14 Rectangle { id:rect width:250; 高さ:250 ボタン{ anchors.bottom:parent.bottom anchors.horizontalCenter:parent.horizontalCenter text: "Change color!" onClicked:{ rect.color = Qt.rgba(Math.random()、Math.random()、Math.random()、1); } } }
プロパティ変更シグナルハンドラー
QML属性の値が変更されると、シグナルが自動的に送信されます。これらのシグナルはプロパティ変更シグナルであり、これらのシグナルのシグナルハンドラーはon <Property> Changedの形式で記述されます。ここで、<Property>はプロパティの名前で、最初の文字は大文字です。
たとえば、マウス領域タイプには押された機能があります。このプロパティが変更されたときに通知を受け取るには、onPressedChangedというシグナルハンドラーを記述します。
import QtQuick 2.14 Rectangle { id:rect width:100; 高さ:100 TapHandler { onPressedChanged:console.log( "taphandler Pressed?"、Pressed) } }
onPressedChangedという名前のシグナルハンドラーがTapHandlerドキュメントに記録されていない場合でも、シグナルは、pressed属性が存在するという事実によって暗黙的に提供されます。
接続タイプを使用
場合によっては、シグナルを発行したオブジェクトの外部のシグナルにアクセスする必要があります。この目的のために、QtQuickモジュールはオブジェクト信号を接続するための接続タイプを提供します。接続オブジェクトは、指定されたターゲットから任意の信号を受信できます。
たとえば、前の例のonClickedハンドラーは、onClickedハンドラーをオブジェクトターゲットセットを持つボタンに接続することにより、ルートを受け取る長方形に置き換えられている可能性があります。
import QtQuick 2.14 import QtQuick.Controls 2.14 Rectangle { id:rect width:250; 高さ:250 ボタン{ id:button anchors.bottom:parent.bottom anchors.horizontalCenter:parent.horizontalCenter text: "Change color!" } 接続{ target:button onClicked:{ rect.color = Qt.rgba(Math.random()、Math.random()、Math.random()、1); } } }
追加のシグナルハンドラー
追加のシグナルハンドラーは、オブジェクト内のハンドラーの代わりに、受信したオブジェクトから追加の種類のシグナルを受信します。
たとえば、Component.onCompletedは追加のシグナルハンドラーです。作成プロセスが完了した後、通常はいくつかのJavaScriptコードを実行するために使用されます。これは例です:
インポートQtQuick 2.14 長方形{ 幅:200; 高さ:200 色:Qt.rgba(Qt.random()、Qt.random()、Qt.random()、1) Component.onCompleted:{ console.log( "長方形の色は"、color) } }
onCompletedハンドラーは、Rectangleタイプの完了信号に応答しませんでした。代わりに、信号を含むコンポーネントタイプのオブジェクトが、QMLエンジンによってRectangleオブジェクトに自動的にアタッチされています。Rectangleオブジェクトを作成するとき、エンジンはこのシグナルを発行し、それがComponent.onCompletedシグナルハンドラーをトリガーします。
追加のシグナルハンドラーを使用すると、個々のオブジェクトにとって重要な特定のシグナルをオブジェクトに通知できます。たとえば、Component.onCompletedに追加のシグナルハンドラがない場合、オブジェクトは、特別なオブジェクトから特別なシグナルを登録しない限り、通知を受信できません。付属のシグナルハンドラメカニズムにより、オブジェクトは追加のコードなしで特定のシグナルを受信できます。
追加のシグナルハンドラーの詳細については、「追加のプロパティと追加のシグナルハンドラー」を参照してください。
カスタムQMLタイプに信号を追加する
シグナルは、signalキーワードを介してカスタムQMLタイプに追加できます。
新しい信号を定義する構文は次のとおりです。
シグナル<name> [([<type> <parameter name> [、...]])]
メソッドとしてシグナルを呼び出してシグナルを送信します。
たとえば、次のコードはという名前のファイルでSquareButton.qmlを定義します。ルート長方形
オブジェクトには、TapHandlerがクリックされるたびに呼び出されるアクティブ化された信号があります。この特定の例では、アクティブ化された信号は、マウスクリックのx座標とy座標で出力されます。
// SquareButton.qml import QtQuick 2.14 Rectangle { id:root signalactivated(real xPosition、real yPosition) property point mouseXY property int side:100 width:side; height:side TapHandler { id:handler onTapped:root.activated(mouseXY.x、mouseXY.y) onPressedChanged:mouseXY = handler.point.position }
}
これで、任意のオブジェクトSquareButtonをアクティブにして、onActivatedシグナルハンドラーを使用してシグナルに接続できます。
// myapplication.qml SquareButton { onActivated:console.log( "Activated at" + xPosition + "、" + yPosition) }
カスタムQMLタイプの信号の書き込みの詳細については、信号のプロパティを参照してください。
シグナルをメソッドとシグナルに接続する
信号オブジェクトには、信号を1つのメソッドまたは別の信号に接続するためのconnect()メソッドがあります。シグナルがメソッドに接続されると、シグナルが発信されるたびにメソッドが自動的に呼び出されます。このメカニズムにより、シグナルハンドラーの代わりにメソッドがシグナルを受信できるようになります。
以下では、messageReceivedはconnect()メソッドを使用して信号を3つのメソッドに接続します。
import QtQuick 2.14 Rectangle { id:relay signal messageReceived(string person、string notice) Component.onCompleted:{ relay.messageReceived.connect(sendToPost) relay.messageReceived.connect(sendToTelegraph) relay.messageReceived.connect(sendToEmail) relay.messageReceived( "Tom"、 "Happy Birthday") } 関数sendToPost(person、notice){ console.log( "Sending to post:" + person + "、" + notice) } function sendToTelegraph(person、notice){ console.log( "電信に送信:" +人+ "、"+通知) } 関数sendToEmail(person、notice){ console.log( "Send to email:" + person + "、" + notice) } }
多くの場合、connect()関数を使用する代わりに、シグナルハンドラーを介してシグナルを受信するだけで十分です。ただし、この接続方法を使用すると、さまざまな方法で信号を受信できます。前述したように、信号ハンドラーは一意に名前を付ける必要があるため、これを行うことはできません。同様に、connectメソッドは、動的に作成されたオブジェクトに信号を接続するときに役立ちます。
接続信号を排除するために対応する接続解除メソッド()があります。
長方形{ id:relay // ... function removeTelegraphSignal(){ relay.messageReceived.disconnect(sendToTelegraph) } }
信号間接続
信号を他の信号に接続することにより、connect()メソッドは異なる信号チェーンを形成できます。
長方形{ id:forwarder width:100 height:100 anchors.fill:parent signal send onSend:console.log( "Send clicked") color: "grey" TapHandler { id:mousearea onTapped:console.log( "Mouse clicked") } Component.onCompleted:{ mousearea.tapped.connect(send) } }
TapHandlerのタップ信号が送信されるたびに、送信信号も自動的に送信されます。
出力:
マウスエリアがクリックされた
クリックして送信