javascript - Qt Quick Controls 2 - 更改另一个页面上的属性

Question

我有一个有两个页面的应用程序。应用程序的第一页在它自己的两个文件中定义:Page1.qml 和 Page1Form.ui.qml。应用程序的第二页也在它自己的两个文件中定义:Page2.qml 和 Page2Form.ui.qml。我无法理解如何使用另一页面的控件更改应用程序中一个页面上存在的项目的属性。

假设我希望在按下第 2 页上的按钮时更改第 1 页上的标签文本。我已经为标签和按钮创建了别名。对于 Page2.qml 中按钮的实现，我希望使用以下代码:

button.onClicked: {
        Page1Form.label_sourceValue.text = "Text has changed.";
}

但是，在应用程序运行时按下按钮时，我收到错误代码“TypeError:类型错误”，并引用了我设置文本的代码行。

我是 Qt 新手，所以我可能只是在这里做了一些非常愚蠢的事情......但是在网上寻找答案 3 个多小时之后，我准备好说叔叔。任何帮助都会很棒。

Answer 1

每个 Qt Quick Item 可以有两个 id:

• 项目的 .qml 文件内提供的 id。本示例中未使用此 id，例如page1thisIdNotUsed 和 page2thisIdNotUsed。
• 由其父级赋予Item的id。下面示例中的 page1 和 page2 示例。

这个示例强调了我认识的人中没有人使用 Qt Designer 进行 QML 的一个原因。 Page1.qml 文件似乎只是妨碍并创建额外的代码。为了从 main.qml 访问 page1 或 page2 的内容，我们现在必须在 Page1.qml 中创建额外的别名 和 Page2.qml。

相反，大多数人更喜欢将 Page1Form.ui.qml 的内容移至 Page1.qml 中。删除 Page1Form.ui.qml，并学习手动 QML，而不是通过设计器。

祝你好运!

main.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1 {
            id: page1
        }

        Page2 {
            id: page2
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr("First")
        }
        TabButton {
            text: qsTr("Second")
        }
    }
}

Page1.qml

import QtQuick 2.9

Page1Form {
    id: page1thisIdNotUsed
}

Page1Form.ui.qml

import QtQuick 2.9
import QtQuick.Controls 2.2

Item {
    width: 400
    height: 400

    property alias label_sourceValue: label

    Label {
        id: label
        x: 152
        y: 128
        text: qsTr("Label")
    }
}

Page2.qml

import QtQuick 2.4

Page2Form {
    id: page2thisIdNotUsed
    button.onClicked: {
        page1.label_sourceValue.text = "Text has changed.";
    }
}

Page2Form.ui.qml

import QtQuick 2.7
import QtQuick.Controls 2.0

Item {
    property alias button: button

    Button {
        id: button
        text: qsTr("Press Me")
    }
}