c++ - Qt5-QML : Button does not show up after triggered

Question

我正在编写一个使用 Qt5-QML 的项目。为了缩小问题，我准备了一个复制问题的小例子。

1) 我在 Page1 上有一个应用程序。它带有一个 Button，如下面的打印屏幕所示:

2) 在用户按下按钮后，Page2 显示如下，其中包含不同的 Button。假设 Button A 它是用户的选择:

3) Page1 代表的最终画面是正确的选择，也就是选择的按钮

问题 我遇到的是，在用户选择第 2 点的选项并返回 Page1 后，Button 应该出现在Page1 在打开对话框窗口的 Page1 中间，在我的例子中是一个 WebEngineView 只与那个 Button。当然，如果用户在 Page2 上选择了 Button 3，返回到 Page1 时，应该会有另一个 Button 打开另一个与 Button 3 相关的对话框，它始终是一个 WebEngineView。

我看不到 Button 和相关的对话框。

预期的结果是下面的打印屏幕:

在出现问题的代码片段下方:

ma​​in.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Conn")
    property Page1 page1: Page1 {}
    property Page2 page2: Page2 {}
    Component.onCompleted: {
        page2.onButtonClicked.connect(function(buttonId, buttonName) {
            page1.mytext.text = buttonId;
            page1.mytext.text = buttonName;
            mystackview.pop();
        });
    }

// These buttons should appear only after the user selects the choices on `Page2` 
    Button {
        id: dialogA
        Layout.fillWidth: true
        text: "Open Dialog A"
    }
    Button {
        id: dialogB
        Layout.fillWidth: true
        text: "Open Dialog B"
    }
    Button {
        id: dialogC
        Layout.fillWidth: true
        text: "Open Dialog C"
    }

    StackView {
        id: mystackview
        anchors.fill: parent
        initialItem: page1
    }
}

page1.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
Page {
    property alias mytext: mytext
    Button {
        id: button1
        text: "Select"
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        onClicked: {
            mystackview.push(page2);
        }
    }
    Text {
        id: mytext
        anchors.top: button1.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        font.bold: true
        font.pointSize: 30
    }
}

page2.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Page {
    signal onButtonClicked(var buttonId, var buttonName)

    Component.onCompleted: {
        button1.clicked.connect(function() {
            onButtonClicked(1, "A");
        });
        button2.clicked.connect(function() {
            onButtonClicked(2, "B");
        });
        button3.clicked.connect(function() {
            onButtonClicked(3, "C");
        });
    }

    ColumnLayout {
        id: mybuttons
        anchors.fill: parent
        spacing: 5
        Button {
            id: button1
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "A"
        }
        Button {
            id: button2
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "B"
        }
        Button {
            id: button3
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "C"
        }
    }

到目前为止我尝试了什么:

1) 我遇到了以下 source这对于理解码件的 style 很有用。这就是我在代码中使用 Component.onCompleted: 的原因。这在触发 Page2 上的按钮方面做得很好。我认为我也可以对其他人使用相同的理念，但他们没有出现。

2) This source对我理解码件的属性很有用，特别是在如何在点击时突出显示的示例中。我认为这是我能找到的最接近我正在做的事情。

3) 深入挖掘我想要实现的目标我继续阅读官方文档，这似乎插入了属性 onCurrentItemChanged 的使用，这可能是触发 emit 信号的属性。

更新

ma​​in.qml 中的以下部分用于显示一旦用户触发三个按钮之一，然后在 page1 上显示字母按钮被点击，实际上可以在程序的3)点看到它。

Component.onCompleted: {
        page2.onButtonClicked.connect(function(buttonId, buttonName) {
            page1.mytext.text = buttonId;
            page1.mytext.text = buttonName;
            mystackview.pop();
        });

这连接到 page2.qml 上的 signal，如下所示:

signal onButtonClicked(var buttonId, var buttonName)

为什么我返回QML 应用程序的Page1 后看不到Button？非常感谢您指出正确的方向来解决这个问题。

Answer 1

正如我在评论中提到的，无论如何，“打开对话框”按钮总是被堆栈 View 隐藏。如果它们没有被隐藏，它们在任何情况下都需要一些标志来指示它们是否应该可见，具体取决于在 Page2 上所做的选择。

与您的 MRE 的现有结构保持一致，这是一种可行的方法。我已将“打开对话框”按钮移动到 Page1，因为这似乎最有意义，但它们也可以位于某个单独的页面上，或者如果那里有一些布局，则合并到 main.qml 中这允许。我还从 Page1 建立了信号/插槽连接以触发 main.qml 中的 Page2 加载(而不是直接尝试访问 main.qml 中的对象，这是不好的做法).我还从 Page1 中删除了文本标签以简化代码。 Page2 代码保持不变，因此我没有包含它。

ma​​in.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Conn")
    property Page1 page1: Page1 {}
    property Page2 page2: Page2 {}

    Component.onCompleted: {
        page1.selectDialog.connect(function()  {
            mystackview.push(page2);
        });

        page2.onButtonClicked.connect(function(buttonId, buttonName) {
            page1.dialogId = buttonId;
            mystackview.pop();
        });
    }

    StackView {
        id: mystackview
        anchors.fill: parent
        initialItem: page1
    }
}

Page1.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Page {

    property int dialogId: -1;

    signal selectDialog()

    ColumnLayout {
        anchors.fill: parent
        spacing: 5

        Button {
            id: button1
            text: "Select"
            onClicked: selectDialog()
            Layout.fillWidth: true
        }

        // These buttons should appear only after the user selects the choices on `Page2`
        Button {
            id: dialogA
            text: "Open Dialog A"
            visible: dialogId === 1
            Layout.fillWidth: true
        }
        Button {
            id: dialogB
            text: "Open Dialog B"
            visible: dialogId === 2
            Layout.fillWidth: true
        }
        Button {
            id: dialogC
            text: "Open Dialog C"
            visible: dialogId === 3
            Layout.fillWidth: true
        }
    }
}