Two-Way Bindings

A two-way binding, written with <=>, links two properties so that they always hold the same value; writing either side updates the other:

export component Example {
    in property<brush> rect-color <=> r.background;
    // The type may be omitted; it is then inferred from the other side.
    in property rect-color2 <=> r.background;
    r := Rectangle {
        background: blue;
    }
}

slint

The left-hand side is the property or callback being declared or bound; the right-hand side references the property or callback it links to.

• Both sides must have the same type. In a property declaration the type may be omitted and is inferred from the other side.
• The right-hand side references a property — of the same element, another element, the root component, or a global (Global.property) — or a field of matching type within a property of struct type. Linking to a global’s property re-exposes that member on the component.
• Inside a for element the right-hand side may be the model value, which stays in sync.
• Both sides must be compatible in input and output: each must be readable and writable wherever the binding reads or writes it.
• The initial value of the linked pair is the value of the right-hand side.

The same <=> syntax forms a callback alias that forwards one callback to another (see Callbacks). A callback alias may target a global’s callback, including from another global — the supported way for one global to implement another’s callback.

global Logic {
    in-out property <int> the-value;
    pure callback magic-operation(int) -> int;
}

export component MainWindow inherits Window {
    // re-expose the global's members on the component
    in-out property the-value <=> Logic.the-value;
    pure callback magic-operation <=> Logic.magic-operation;
}

slint