How Can I set this in-out property's initial value?

[gcb]

I have one component property tied to another one that is tied to a list current-item.

It works fine and the interaction is what one expect. But if I set that property, the interaction breaks.

The same doesn't happen If I don't use components' properties.

This, without components' properties, works fine:

import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";


import { StandardListView } from "std-widgets.slint";
export component Demo {
    height: 400px;
    width: 500px;

    property<[StandardListViewItem]> sources: [
        {text: "Ui Designer Data 1"},
        {text: "Ui Designer Data 2"},
        {text: "Ui Designer Data 3"},
        {text: "Ui Designer Data 4"},
    ];

    GridLayout {
        list := StandardListView {
            model: sources;
            current-item: 2; // set initial value, won't stop user iteration!
        }
        Text { text: sources[list.current-item].text; }
    }
}

Now, what I think is almost the same bindings, don't work:

import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";


import { StandardListView } from "std-widgets.slint";

component U2mSourceList {
    in-out property<int> selected: list.current-item;
    in  property<[StandardListViewItem]> sources: [
        {text: "Ui Designer Data 1"},
        {text: "Ui Designer Data 2"},
        {text: "Ui Designer Data 3"},
        {text: "Ui Designer Data 4"},
    ];
    list := StandardListView {
        model: sources;
    }

}

component U2mSourceDetail {
    in property<int> showing: 0;
    in property <[string]> sources: [
        "Ui Designer Data 1",
        "Ui Designer Data 2",
        "Ui Designer Data 3",
        "Ui Designer Data 4",
    ];
    Text { text: sources[showing]; }
}

export component Demo {
    height: 400px;
    width: 500px;
    GridLayout {
        sources := U2mSourceList {
            min-width: 100px; max-width: 600px; horizontal-stretch: 0.2;
            row: 0; col: 0;
            rowspan: 2;
            // selected: 1; // if this line is present, interaction is broken.
        }
        U2mSourceDetail {
            min-width: 200px; horizontal-stretch: 0.8;
            row: 0; col: 1;
            showing: sources.selected;
        }
    }
}

Am I doing something wrong there? or is there a work around?

[gcb]

it's even weirder. If I have a button on the top level, that sets the sources.selected = 2... now the SourcesDetail shows from item 2, but the StandardlistView in the SourceList component shows nothing selected on linux, but keeps the previous selection on slintpad web (and interaction is broken)

full example for copy-paste convenient... same as above, but with one extra Button at the end.

import { AboutSlint, Button, VerticalBox } from "std-widgets.slint";


import { StandardListView } from "std-widgets.slint";

component U2mSourceList {
    in-out property<int> selected: list.current-item;
    in  property<[StandardListViewItem]> sources: [
        {text: "Ui Designer Data 1"},
        {text: "Ui Designer Data 2"},
        {text: "Ui Designer Data 3"},
        {text: "Ui Designer Data 4"},
    ];
    list := StandardListView {
        model: sources;
    }

}

component U2mSourceDetail {
    in property<int> showing: 0;
    in property <[string]> sources: [
        "Ui Designer Data 1",
        "Ui Designer Data 2",
        "Ui Designer Data 3",
        "Ui Designer Data 4",
    ];
    Text { text: sources[showing]; }
}

export component Demo {
    height: 400px;
    width: 500px;
    GridLayout {
        sources := U2mSourceList {
            min-width: 100px; max-width: 600px; horizontal-stretch: 0.2;
            row: 0; col: 0;
            rowspan: 2;
            //selected: 1; // if this line is present, interaction is broken.
        }
        U2mSourceDetail {
            min-width: 200px; horizontal-stretch: 0.8;
            row: 0; col: 1;
            showing: sources.selected;
        }
        Button { row: 2; text: "set selected=2"; clicked =>{ sources.selected=2; } } // interaction works until this is clicked.
    }
}

[gcb]

After searching the docs for all words related to bidirectional i finally did the same here instead and found the answer: <=> on the in-out property association to the list property.

[gcb]

https://github.com/slint-ui/slint/pull/7445/files

[hunger]

Thanks for improving the docs while you were at it! It is very much appreciated.

[gcb]

thank yall for slint :)

btw, what is the use case of in-out x = also-in-out-y? why is <=> even a thing on the syntax? ... I don't think anyone would want the use case I describe here (i.e. in sync until set by code and then broken). And I can't imagine other consequences when using it.

[hunger]

property <color> x: y; binds two properties x and y so that x updates as soon as y changes.

property <color> x <=> y; collapses the two properties into one property.

When you do x = red; later in some code block, in the first case that will "unbind" x from y again, setting x to red and keeping y at whatever value it had.

In the second case, x = red will set x and y to red. They are both names for the same few bits of storage space.

Does this help a bit?

[gcb]

but what's the use case for the your first x y example when both are in-out?

from my small test, initialy x updates as soon as y changes, but if i set x the relation is broken. oh i see... that's the use case. kinda odd but i can see some default-if-unset case now that i spelled it out. :)