Switch 1 sets Switch 2 ... Binding lost?

[dirkeinecke]

Hi!

I want to control one switch (#1) with another switch (#2). At first glance, this seems to work fine. When I turn on "Switch 1", "Switch 2" also turns on, and vice versa.

However, when I use the GUI to click "Switch 2", turning it on and then off again, I can no longer control "Switch 2" with "Switch 1". This seems very strange. Or am I overlooking a catch?

Here is my source code for this:

use slint::Weak;

slint::slint!{
import { Switch } from "std-widgets.slint";

export component App inherits Window {
    in property <bool> checked_1: false;
    in property <bool> checked_2: false;
    callback toggled_1 <=> switch_1.toggled;
    callback toggled_2 <=> switch_2.toggled;
    width: 100px;
    height: 100px;
    VerticalLayout {
        switch_1 := Switch {
            text: "Switch 1";
            checked: checked_1;
        }
        switch_2 := Switch {
            text: "Switch 2";
            checked: checked_2;
        }
    }
}
}

fn main() {
    let app: App = App::new().unwrap();

    let weak_1: Weak<App> = app.as_weak();
    app.on_toggled_1(move|| { 
        if let Some(app) = weak_1.upgrade() {
            let is_checked: bool = !app.get_checked_1();
            println!("1 - is_checked: {}", is_checked);
            match is_checked {
                true => {
                    app.set_checked_1(true);
                },
                false => {
                    app.set_checked_1(false);
                },
            }

            app.set_checked_2(is_checked);
        }
    });

    let weak_2: Weak<App> = app.as_weak();
    app.on_toggled_2(move|| {
        if let Some(app) = weak_2.upgrade() {
            let is_checked: bool = !app.get_checked_2();
            println!("2 - is_checked: {}", is_checked);
            match is_checked {
                true => {
                    app.set_checked_2(true);
                },
                false => {
                    app.set_checked_2(false);
                },
            }
        }
    });

    app.run().unwrap();
}

[hunger]

Is this the behavior you want?

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

export component App inherits Window {
    out property <bool> switch1 <=> switch_1.checked;
    out property <bool> switch2 <=> switch_2.checked;
        
    width: 100px;
    height: 100px;
    VerticalLayout {
        switch_1 := Switch {
            text: "Switch 1";
            toggled() => { 
                switch_2.checked = self.checked;
            }
        }
        switch_2 := Switch {
            text: "Switch 2";
        }
    }
}

No backend code is needed in that case ;-)

[hunger]

Oh, I see. Yes, toggling the switch will set it to true or false overriding the value.

You should be able to just alias the App properties with the switches' checked:

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

export component App inherits Window {
    in property <bool> checked_1 <=> switch_1.checked;
    in property <bool> checked_2 <=> switch_2.checked;

    callback toggled_1 <=> switch_1.toggled;
    callback toggled_2 <=> switch_2.toggled;

    width: 100px;
    height: 100px;

    VerticalLayout {
        switch_1 := Switch {
            text: "Switch 1";
        }
        switch_2 := Switch {
            text: "Switch 2";
        }
    }
}

You might need to turn the checked_* properties into in-out, I am not 100% sure about that right now.

[dirkeinecke]

in property <bool> checked_1 <=> switch_1.checked;

The binding for the property 'checked-1' is part of a binding loop

Unfortunately, it doesn't work like that.

In my original backend code, I corrected the line app.set_checked_1(is_checked); in app.on_toggled_1 to app.set_checked_2(is_checked);.

[mcitem]

哦，我明白。是的，切换开关会将其设置为或覆盖该值。true``false

您应该能够使用 switches 的 ：App``checked

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

export component App inherits Window {
    in property <bool> checked_1 <=> switch_1.checked;
    in property <bool> checked_2 <=> switch_2.checked;

    callback toggled_1 <=> switch_1.toggled;
    callback toggled_2 <=> switch_2.toggled;

    width: 100px;
    height: 100px;

    VerticalLayout {
        switch_1 := Switch {
            text: "Switch 1";
        }
        switch_2 := Switch {
            text: "Switch 2";
        }
    }
}

你可能需要把属性变成 ，我现在不是 100% 确定。checked_*``in-out

>     in property <bool> checked_1 <=> switch_1.checked;
>     in property <bool> checked_2 <=> switch_2.checked;

I have a question,How should I set the default value for bidirectional binding

[dirkeinecke]

I have a question,How should I set the default value for bidirectional binding

I have set the default value for the switches in my backend code when starting the app.

[mcitem]

I have a question,How should I set the default value for bidirectional binding

I have set the default value for the switches in my backend code when starting the app.

I know it can be set in the backend, but I was hoping it could be set directly in slint.(

[mcitem]

use slint::Weak;

slint::slint! {
import { Switch } from "std-widgets.slint";

export component App inherits Window {
    in property <bool> checked_1 <=> switch_1.checked;
    in property <bool> checked_2 <=> switch_2.checked;
    callback toggled_1 <=> switch_1.toggled;
    callback toggled_2 <=> switch_2.toggled;
    width: 100px;
    height: 100px;
    VerticalLayout {
        switch_1 := Switch {
            text: "Switch 1";
        }
        switch_2 := Switch {
            text: "Switch 2";
        }
    }
}
}

fn main() {
    let app: App = App::new().unwrap();

    let weak_1: Weak<App> = app.as_weak();
    app.on_toggled_1(move || {
        if let Some(app) = weak_1.upgrade() {
            let is_checked: bool = app.get_checked_1();

            match is_checked {
                true => {
                    // do something when #1 checked
                    println!("Switch 1 is checked");
                    app.set_checked_1(true);
                }
                false => {
                    app.set_checked_1(false);
                }
            }

            app.set_checked_2(is_checked);
        }
    });

    let weak_2: Weak<App> = app.as_weak();
    app.on_toggled_2(move || {
        if let Some(app) = weak_2.upgrade() {
            let is_checked: bool = app.get_checked_2();

            match is_checked {
                true => {
                    app.set_checked_2(true);
                }
                false => {
                    app.set_checked_2(false);
                }
            }
        }
    });

    app.run().unwrap();
}

I'm not entirely sure what specific outcome you're looking for. Is it correct that when you set #1, #2 will also be in the same state? And switching #2 does not affect #1. If not, please provide more detailed background information.

[dirkeinecke]

Thank you very much. This is the solution. The minimal example here works exactly as intended. I will now start incorporating the changes into my original app.