QML - 如何从另一个组件获取 comboBox.currentText？答案

【问题标题】：QML - how can I get comboBox.currentText from another component?QML - 如何从另一个组件获取 comboBox.currentText？
【发布时间】：2021-12-28 06:20:51
【问题描述】：

我刚开始学习 qml，有一个关于如何从另一个组件获取 comboBox.currentText 的问题。

代码示例：

App {
    id: app
    width: px(250); height: px(250)

    NavigationStack {
        Page {
            id: page
            navigationBarHidden: true
            AppText { text: "startpage" }
            SimpleButton{
                x: 220; y: 0; onClicked: page.navigationStack.push(settingsPage)
            }
            AppText {
                x: 0; y: 50; text: "text " + comboBox1.currentText
            }
        }
    }

    Component {
        id: settingsPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("settings page") }
          SimpleButton{
              x: 220; y: 0; onClicked: page.navigationStack.push(lastPage)
          }

          ComboBox {
              id: comboBox1
              currentIndex: 0
              x: 10; y: 40
              style: ComboBoxStyle {
                  label: Text {
                      text: control.currentText
                  }
              }
              model: ListModel {
                  ListElement { text: "green" }
                  ListElement { text: "dark-green" }
                  ListElement { text: "blue" }
              }
          }

          AppText {
              x: 0; y: 90; text: "text " + comboBox1.currentText
          }
        }
    }

    Component {
        id: lastPage
        Page {
          navigationBarHidden: true
          AppText { text: qsTr("last page") }
          SimpleButton{
              x: 220; y: 0; onClicked: page.navigationStack.push(page)
          }
          AppText {
              x: px(50); y: px(90); text: "text " + comboBox1.currentText
          }
       }
    }
}

->我需要从settingspage中的Combobox中获取选中的Listelement，并在id:lastPage的组件中使用它

任何帮助将不胜感激

【问题讨论】：

这是声明式（QML）和命令式（你的问题）范式之间的区别。实际上，您还没有从某些组件中获得一些价值。你必须声明如果这个值改变了会发生什么。这也是“范围”一词发挥作用的地方。在你的情况下，我会声明一个信号，可能在一些可以访问两个组件的根/主项中，然后从一个组件触发事件，因此在信号的处理程序中更改另一个。
@folibis 感谢您的快速回答。目前我所有的代码都在 main.qml 代码中。我应该改变这个吗？我知道这是一个非常基本的问题，但我不完全确定如何构建它。你有什么可以参考的例子吗？

标签： combobox qml components embedded

【解决方案1】：

实际上我不知道你在这里使用的是什么元素（App、NavigationStack 等），但通常结构可以如下所示：

Window {
    visible: true   
    width: 400
    height: 300
    id: root
    property color someColor: "green"

    Row {
        id: element1
        anchors.centerIn: parent
        Rectangle {
            width: 100
            height: 100
            color: root.someColor
        }

        Rectangle {
            id: element2
            width: 100
            height: 100
            color: "yellow"
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    root.someColor = "blue"
                }
            }
        }
    }
}

element1 依赖于其父项/顶级项中始终在范围内的某些属性。这种构造在 QML 中称为property bindings，可以通过多种方式完成（例如使用Binding，适用于动态元素）。 element2 也可以访问/更改属性，因此从element2 更改它会立即影响element1。当您想从root 和element1 访问element1 时，这也解决了一个问题，不在范围内，或者不存在，或者在这种情况下会导致您的应用程序崩溃的任何其他问题。

【讨论】：

Window 在这里无所谓，我只是想展示这个概念，一个工作示例