QML - 如何记住 combobox 选择

Question

I have a problem with remembering my combobox selection.

This is my code:

App {
    id: app
    property var selectedColor: "green"

    NavigationStack {
        Page {
            id: page
            navigationBarHidden: true
            BackgroundImage { source: "../assets/background/default_" + app.selectedColor + ".png" }
            Text { text: qsTr("1st page") }
            Button {
                y: 30
                text: "go to 2nd page"
                onClicked: page.navigationStack.push(secondpage)
            }
        }
    }

    Component {
        id: secondpage
        Page {
          navigationBarHidden: true
          BackgroundImage { source: "../assets/background/default_" + app.selectedColor + ".png" }
          Text { text: qsTr("2nd page") }
          Button {
              y: 30
              text: "go to color selection"
              onClicked: page.navigationStack.push(chooseColorPage)
          }
        }
    }
    
    Component {
        id: chooseColorPage
        Page {
          navigationBarHidden: true

          ComboBox {
              id: colorComboBox
              editable: false
              activeFocusOnPress: true
              model: ListModel {
                  ListElement { text: "green" }
                  ListElement { text: "blue" }
                  ListElement { text: "orange" }
              }

              onCurrentTextChanged: app.selectedColor = currentText

              style: ComboBoxStyle {
                  label: Text {
                      text: control.currentText
                  }
              }
          }
          Button {
              y: 30
              text: "go to 1st page"
              onClicked: page.navigationStack.push(page)
          }
        }
    }
}

When I select a color in "chooseColorPage", the background image in the other pages changes as it should. But once I open the "chooseColorPage" again, the label always says "green". Even if I previously selected eg "blue". What do I need to change so that the selected color doesnt chage until the user clicks on another color in the combobox?

Any help would be appreciated!

Answer 1

Your components are created and destroyed dynamically. Therefore, when you go back into "chooseColorPage" you are recreating the ComboBox. Without code to load the current value of selectedColor into it, it will always default to the first item in the model - in this case "green".

To fix it, you need to create a function that fires when chooseColorPage becomes active. Likely Component.onCompleted attached to the ComboBox would be good enough. In that function, you'll need to find the index of the current value of "selectedColor" in the ListModel and then set colorComboBox.currentIndex to it.