プロパティ間のバインディングの追加

コンポーネントの動作を動的に変更するには、2つのコンポーネントのプロパティ間にバインディングを作成します。プロパティのバインディングを作成するには、プロパティに、必要な値に評価される JavaScript 式を割り当てます。舞台裏では、バインディング式の変数が監視されます。変更が検出されると、バインディング式が再評価され、新しい結果がプロパティに適用されます。

最も単純なバインディングは、他のプロパティへの参照です。たとえば、コンポーネントの高さを親の高さにバインドして、親の高さが変わるとコンポーネントの高さが自動的に調整されるようにすることができます。

プロパティバインディングの使用方法の詳細については、プロパティバインディングを参照してください。

コ ン ポーネ ン ト 間のバ イ ンデ ィ ン グ を作成す る には、Connections >Bindings に進みます。

コ ン ポーネ ン ト プ ロ パテ ィ 間のバ イ ンデ ィ ン グの作成

コンポーネントのプロパティを別のコンポーネントのプロパティにバインドするには、次の手順に従います：

1. 2D ビューに 2 つの コ ン ポーネ ン ト を配置 し ます。

   

2. 最初のコンポーネントをviewBox と名付けます。
3. 2番目のコンポーネントをconnectBox と名付ける。
4. viewBoxコンポーネントに太い黒 Border と青い Color を適用します。
5. connectBoxコンポーネントを選択します。
6. Connections ビューからBindings を選択します。
7. (Add) ボタンを選択して、バインディングエディタで現在選択されているコンポーネントにバインディングを追加します。

   

   バインディングエディター。

8. From で、親コンポーネントとしてviewBox を選択します。次に、そのborder.color プロパティを選択します。
9. To では、ターゲット・コンポーネントとしてconnectBoxコンポーネントが選択されています。下のドロップダウンからcolor を選択し、その影響を受けるプロパティを設定します。
10. ビューボックスコンポーネントの border.color は、コネクトボックスコンポーネントの color に適用されます。

    

すべてのバインディングは、コード内に自動化されたJavaScript式を持っています。詳細については、「バインディングを設定する」を参照してください。

プロパティのバインディングを作成する例については、「状態を使用してコンポーネントのプロパティ値を変更する」を参照してください。

論理演算子の概要

式の中で以下の論理演算子を使用すると、複数の条件を 1 つの式にまとめることができます：

さらに、チェックの前に算術演算子を使用して数値を比較することもできます。しかし、可能な限り、この目的のために別のプロパティを作成することをお勧めします。