Navigation in Slint between UI

[sundaritisthatis]

Consider a webapp with user login / registration pages.

How to switch between UI - is it okay to flutter way or kind of web app navigation reload over all pages. Especially considering having api calls

[zhangzqs]

Slint does not yet support like PageStack { ... } navigation
#328

But my solution is to achieve it in the following way，

Consider drawing a state diagram of all pages and page jump relationships of your program

Write the following slint code:

     import { Button , TabWidget, LineEdit} from "std-widgets.slint";
     // route table
    enum MultiPageEnum {
        LoginPage,
        RegisterPage,
        IndexPage,
    }

    export component LoginPage inherits Rectangle {
        property <string> account;
        callback on-login-success(string);
        callback on-register-button-click();

        // Route enter init page property
        public function enter-page(account: string) {
            self.account = account;
        }

        VerticalLayout {
            HorizontalLayout {
                Text {
                    text: "Account:    ";
                }

                LineEdit {
                    text <=> account;
                }
            }
            HorizontalLayout {
                Button {
                    text: "Login";
                    clicked => {
                        debug("login...");
                        on-login-success(account);
                    }
                }
                Button {
                    text: "Register";
                    clicked => {
                        debug("login...");
                        on-register-button-click();
                    }
                }
            }
        }
    }

    export component RegisterPage inherits Rectangle {
        callback on-register-success(string);
        Button {
            text: "Register";
            clicked => {
                debug("register...");
                on-register-success("testuser");
            }
        }
    }

    export component IndexPage inherits Rectangle {
        property <string> account;

        public function enter-page(account: string) {
            self.account = account;
        }

        Text {
            text: "Index, Hello, " + account;
        }
    }

    export component MainWindow inherits Window {
        property <MultiPageEnum> current-page: LoginPage;
        login-page := LoginPage {
            width: parent.width;
            height: parent.height;
            visible: MultiPageEnum.LoginPage == current-page;
            on-login-success(account) => {
                // pass value
                index-page.enter-page(account);
                // enter page
                current-page = MultiPageEnum.IndexPage
            }
            on-register-button-click => {
                // enter page
                current-page = MultiPageEnum.RegisterPage
            }
        }
        register-page := RegisterPage {
            width: parent.width;
            height: parent.height;
            visible: MultiPageEnum.RegisterPage == current-page;
            on-register-success(account) => {
                // pass value
                login-page.enter-page(account);
                // enter page
                current-page = MultiPageEnum.LoginPage
            }
        }
        index-page := IndexPage {
            width: parent.width;
            height: parent.height;
            visible: MultiPageEnum.IndexPage == current-page;
        }
    }

This is a multi-page GUI I implemented on the ESP32 using this method
https://github.com/zhangzqs/esp-clock-rs/blob/master/slint-app/ui/pages/index.slint