[Eric]

Hello,

I’m sorry if this is a really simply question but I haven’t been able to find anything online, or I have but didn’t recognize it as a solution.

I have a page that has a Rectangle{} that has ‘visible’ set to true or false depending on a user setting. However, if I first load the page with the rectangle then go to the page with the settings (using NavigationStack) and change the setting then finally return to the page with the rectangle, the visibility doesn’t change. In order to get the visibility to change, I have to quit and reload the app. Below is my structure:

Box Page:

NavigationItem {

    title: "Box"
    icon: IconType.list

    NavigationStack {
        Page {
            title: "Red Box"
            id: box_page

            Item {
                id: user_settings
                property bool show_box

                Component.onCompleted: {

                    // Load show_box setting
                    user_settings.show_box = Qt.binding(function(){ return myLocalStorage.getValue("show_box").value })
                }
            }

            Column {
                width: parent.width - dp(50)
                anchors.centerIn: parent
                spacing: dp(12)

                Rectangle {
                    visible: (user_settings.show_box === true) ? true : false
                    height: dp(100)
                    width: dp(100)
                    color: "red"
                }
            }
        }
    }
}

 

In short, here are the steps and what I see vs. what I want to see:

1. Navigate to ‘Box Page’ (I see the red box)
2. Navigate to the user settings page
3. Change the ‘show_box’ setting from true to false
4. Navigate back to ‘Box Page’ (I see the red box but it shouldn’t be visible)

 

What am I missing? Can I set a page to always load as if it were the first load after closing the app?

 

Thank you,
Eric

[AlexFelgo Team]

Hi,

the Storage type is a simple key value database with get and set methods, but it will not trigger a changed signal automatically. Thus your property binding will not be re-evaluated automatically.

Your use-case would be a perfect fit for the Settings qml type.

import Felgo 3.0
import QtQuick 2.9
import Qt.labs.settings 1.0

App {
  id: app

  NavigationStack {

    Page {
      id: page
      title: "Settings"
      
      Settings {
        id: user_settings
        // you can set a default value for the very first app start, after that it will always be read from the storage
        property bool show_box: true
      }
      
      Rectangle {
        anchors.centerIn: parent
        color: "red"
        width: dp(100)
        height: dp(100)
        visible: user_settings.show_box
      }
      
      AppButton {
        anchors.horizontalCenter: parent.horizontalCenter
        text: user_settings.show_box ? "hide" : "show"
        onClicked: {
          user_settings.show_box = !user_settings.show_box
        }
      }
    }
  }
}

Would this be a solution for you?

Cheers,
Alex

[Eric]

The problem is the page where I set user_settings.show_box is on a different page (so, as far as I know, I can’t access the properties on the page with the red box). When I go to the page where the show_box setting is changed, change it, and return to the page with the red box, it doesn’t seem to run the Component.onCompleted {} code again, which would update the show_box setting. How can I force it to run the Component.onCompleted {} code every time I navigate to the page? Currently it only runs Component.onCompleted{} the first time the page is navigated to after the app was closed and restarted. Or is there something other than Component.onCompleted {} that I should be using?

 

If onCompeted{} is only run the first time the app loads, is there something that can effectively ‘unload’ a specific page?

 

Thank you for your time,

Eric

[AlexFelgo Team]

Hi Eric,

pages have pushed and popped signals that you can use. These are fired when using a NavigationStack. The NavigationStack itself also has those signal, as well as properties like currentPage, so you can listen to onCurrentPageChanged to determine if you need to reload your page. If you navigating with Tabs/Drawer of the Navigation instead, you can use its properties to determine whenever a page changed and which one is currently active.

There is no generic signal that is fired when a page becomes visible, as this very specific to how you navigate within your app.

Hope I could point you in the right direction.

Cheers,
Alex

[Eric]

Thank you for your replies, Alex. Here is what I did:

I wasn’t thinking too well and realized that all I need to do is place the show_box property initialization in the App {} section so I can access it from anywhere so if I change it on one page, it’s changed for all pages. This is the obvious answer and I’m sorry you had to spend your time with such a silly question.

Best,
Eric