ベストQtクイックトリック：QMLのプロパティのバインド

「a：b」として宣言されている2つのプロパティ間のバインディング（プロパティバインディング）「a」と「b」は、「b」が更新されるたびに「a」の値を更新します。 プロパティをリンクすると、要素のサイズの制御、アンカーを使用した要素の位置の制御、テキストまたは画像の動的な変更、要素の色またはボタンの状態の制御に実用的なアプリケーションが見つかります。



最も単純な形式では、「b」に関連付けられた「a」は、プロパティのバインドの期間中、「b」と同じ意味を保持します。 より高度な形式では、「a」は「a：b + 1」として「b」を使用する任意のJavaScript式にバインドします。



3つ以上のプロパティを関連付けることができます-「a：b * c + 1」。 この場合、式は「b」または「c」が変更されるたびに考慮されます。



次の表は、「b」と「c」の経時変化に応じた「a」の値を示しています。

a：b * c + 1	a	b	c
初期値	1	0	0
b = 1	1	1	0
c = 2	3	1	2
b = -3	-5	-3	2

プロパティをバインドする可能性は無限に思え、実際、異なるタイプのプロパティ間で設定できます。 列挙「e」に関連付けられた色プロパティ「c」を検討してください。 もちろん、単純なc：eバインディングは機能しません。 ただし、JavaScriptを使用して「e」を変換できます。

function toColor(e) { switch(e) { case highlighted: return "blue"; case inactive: return "white"; default: return "black"; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、プロパティバインディングは次のように記述できます。

 c: toColor(e)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

toColor自体が別のプロパティに依存している場合でも（「e」を除く）、「c」は正しく更新されます-ただし、このような非表示の依存関係は避けたほうがよいでしょう。

関連するプロパティに値を割り当てることは避けてください。 プロパティは、フリー（フリープロパティ）または関連（他のプロパティ、バウンドプロパティ）にすることができます。 プロパティが空いている場合、値を明示的に割り当てることができます。 プロパティがバインドされると、新しい割り当てごとに以前のプロパティの関係が削除されます。 これはエラーの原因になる可能性があるため、回避する必要があります。



明示的な状態管理の代わりにプロパティバインディングを使用できます。 QMLが状態制御ロジックを使用する場合、プロパティバインディングに基づくより高度なソリューションを使用することをお勧めします。 結果は同じになりますが、状態処理は新しいプロパティの背後に隠れます。 状態管理ロジックがより複雑になり始めるとすぐに、プロパティバインディングのスケーラビリティがはるかに高いことがわかります（スケーリングの複雑さの範囲内）。



明示的な状態処理を使用して、要素をアクティブとしてマークします。

 import QtQuick 1.0 //    ,    . Rectangle { id: canvas anchors.fill: parent color: "green" MouseArea { anchors.fill: parent onClicked: { canvas.state == "activated" ? canvas.state = "" : canvas.state = "activated" } } states: [ State { name: "activated" PropertyChanges { target: canvas color: "red" } } ] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

要素の色に関連付けられた新しいプロパティを使用して、要素をアクティブとしてマークします。

 import QtQuick 1.0 //    ,    . Rectangle { id: canvas anchors.fill: parent property bool activated: false color: activated ? "red" : "green" MouseArea { anchors.fill: parent onClicked: { canvas.activated = !canvas.activated } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロパティバインディングの柔軟性と使いやすさは、QMLプログラミングで普遍的に使用される理由を説明しています。 動的な変更に関しては、要素は必ずプロパティに依存する必要があります。 プロパティのバインドと組み合わせて、これらの要素は「自動操縦」で動作します。初期設定後、要素は他の要因に関係なく正しく動作します。 これにより、コードの純度を維持し、エラーのリスクを減らしながら、より複雑なインターフェイスで作業することができます。



ただし、プロパティバインディングを使用することの利点は支払う必要があります。特定の条件下では、パフォーマンスが著しく低下する可能性があります。 ただし、これは別のトピックであり、次の記事に専念します。