Qt Quick Controls 2 - 在另一页上更改属性

Question

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

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

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

但是，当应用处于运行时按下按钮，我得到错误代码 "TypeError: Type error"，并引用了我设置文本的代码行。

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

Answer 1

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

项目的 .qml 文件中提供的 id。此 id 未在此示例中使用，例如page1thisIdNotUsed 和 page2thisIdNotUsed.
parent 给 Item 的 id。示例 page1 和 page2 在下面的示例中。

这个例子强调了为什么我认识的人中没有人使用 QML 的 Qt 设计器的一个原因。 Page1.qml 文件似乎妨碍了创建额外的代码。为了从 main.qml 访问 page1 或 page2 的内容，我们现在必须在 Page1.qml 和 Page2.qml.

中创建额外的别名

相反，大多数人更喜欢将 Page1Form.ui.qml 的内容移动到 Page1.qml 中。删除 Page1Form.ui.qml，并学习手动而不是通过 Designer 使用 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")
    }
}

Qt Quick Controls 2 - 在另一页上更改属性

Qt Quick Controls 2 - Changing properties on another page

javascript

qt