QML - 如何记住 combobox 选择

Question

我无法记住我的 combobox 选择。

这是我的代码：

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)
          }
        }
    }
}

当我 select 在“chooseColorPage”中使用颜色时，其他页面中的背景图像会发生应有的变化。 但是一旦我再次打开“chooseColorPage”，label 总是显示“绿色”。 即使我之前选择了例如“蓝色”。 在用户单击 combobox 中的另一种颜色之前，我需要更改什么以使所选颜色不会改变？

任何帮助，将不胜感激！

Answer 1

您的组件是动态创建和销毁的。 因此，当您将 go 返回“chooseColorPage”时，您正在重新创建 ComboBox。 如果没有将 selectedColor 的当前值加载到其中的代码，它将始终默认为 model 中的第一项 - 在本例中为“绿色”。

要修复它，您需要创建一个 function ，当 chooseColorPage 变为活动状态时触发。 可能 Component.onCompleted 附加到 ComboBox 就足够了。 在该 function 中，您需要在 ListModel 中找到“selectedColor”当前值的索引，然后将 colorComboBox.currentIndex 设置为它。