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 設置為它。