Qt5 QML:ColumnLayout在嵌套循环中覆盖另一个ColumnLayout

在成功地设计了我的一个小应用程序的布局之后，我正在添加事件的逻辑。我几乎完成了它，但一些事件没有发生，因为我的计划。下面是逻辑和完整的源代码，以防验证：

1）当我选择要连接到的机器人时，如下图所示，它确实显示我正在连接，但我根本无法与

QML

页面交互，所有操作都被阻止。我认为这可能是因为我有2个

ColumnLayout

，我认为其中一个正在覆盖另一个，但我不确定为什么会发生这种情况，因为我认为逻辑是完整的：

预期结果是，当我连接到机器人时，整个页面都会工作，而不是（或看起来）禁用

下面是代码中最重要的部分，该部分构成了问题的最小可再现示例：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);
    return app.exec();
}

Page1.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtWebEngine 1.8
import QtQuick.Controls.Styles 1.4

ApplicationWindow {
    id: root
    visible: true
    width: 440
    height: 630
    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) {
            page1.dialogId = buttonId;
            mystackview.pop();
        });
    }
    StackView {
        id: mystackview
        anchors.fill: parent
        initialItem: page1
    }
}

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

import QtQuick.Controls.impl 2.12  // for IconLabel
import QtWebEngine 1.8

Page {
    property int dialogId: -1
    signal selectDialog()

    function buttonClick(button)
    {
        button.text = qsTr("Connecting to %1...").arg(button.text);
        button.enabled = false;
        if (button.background && button.background instanceof Rectangle) {
            button.background.color = "green";
            button.background.gradient = null;
            button.background.visible = true;
        }
        if (button.contentItem && button.contentItem instanceof IconLabel) {
            button.contentItem.color = "white";
            button.contentItem.font.bold = true;
            button.contentItem.font.pointSize = 20;
        }
    }
    function buttonClearList(buttonClear)
    {
        buttonClear.text = qsTr("Clear List").arg(buttonClear.text);
        buttonClear.enabled = true;
        if (buttonClear.background && buttonClear.background instanceof Rectangle) {
            buttonClear.background.color = "red";
            buttonClear.background.gradient = null;
            buttonClear.background.visible = true;
        }
        if (buttonClear.contentItem && buttonClear.contentItem instanceof IconLabel) {
            buttonClear.contentItem.color = "white";
            buttonClear.contentItem.font.bold = true;
            buttonClear.contentItem.font.pointSize = 20;
        }
    }
    ColumnLayout {
        // anchors.fill: parent
        // anchors.topMargin: 0 // margin from top of the page
        Layout.fillWidth: true
        width: parent.width
        spacing: 5
        Button {
            id: button1
            text: "Select Robot"
            width: parent.width
            onClicked: selectDialog()
            Layout.fillWidth: true
            font.pointSize: 20
        }
        Button {
            id: dialogA
            text: "Freddie Mercury: Connected"
            visible: dialogId === 1
            Layout.fillWidth: true
            font.pointSize: 20
            spacing: 10
            onClicked: {
                buttonClick(this)
            }
            ColumnLayout {
                anchors.fill: parent
                anchors.topMargin: 50 // margin from top of the page
                Layout.fillWidth: true
                spacing: 10
                GroupBox {
                    id: box1
                    width: parent.width
                    title: "Connection"
                    font.pointSize: 20
                    Layout.fillWidth: parent
                    spacing: 10
                    GridLayout {
                        width: parent.width
                        columns: 1
                        RowLayout {
                            id: row1
                            spacing: 200
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Label {
                                id: textField
                                text: "Connection:"
                                font.pointSize: 15
                                Layout.fillWidth: true
                            }
                            Text {
                                id: connected
                                text: "Not-Connected"
                                color: "red"
                                font.pointSize: 15
                                horizontalAlignment: Text.AlignRight
                                Layout.fillWidth: true
                            }
                        }
                    }
                }
                Button {
                    id: clist
                    text: "Clear List";
                    Layout.fillWidth: true
                    font.pointSize: 20
                    width: parent.width
                    onClicked: {
                        buttonClearList(this)
                    }
                }
            }
        }
    }
}

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

Page {
    signal onButtonClicked(var buttonId)
    Component.onCompleted: {
        button1.clicked.connect(function() {
            onButtonClicked(1);
        });
    }
    ColumnLayout {
        id: mybuttons
        anchors.fill: parent
        spacing: 5
        Button {
            id: button1
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Freddie Mercury"
            font.pointSize: 20
        }
    }
}

Page2.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtWebEngine 1.8
import QtQuick.Controls.Styles 1.4

ApplicationWindow {
    id: root
    visible: true
    width: 440
    height: 630
    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) {
            page1.dialogId = buttonId;
            mystackview.pop();
        });
    }
    StackView {
        id: mystackview
        anchors.fill: parent
        initialItem: page1
    }
}

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

import QtQuick.Controls.impl 2.12  // for IconLabel
import QtWebEngine 1.8

Page {
    property int dialogId: -1
    signal selectDialog()

    function buttonClick(button)
    {
        button.text = qsTr("Connecting to %1...").arg(button.text);
        button.enabled = false;
        if (button.background && button.background instanceof Rectangle) {
            button.background.color = "green";
            button.background.gradient = null;
            button.background.visible = true;
        }
        if (button.contentItem && button.contentItem instanceof IconLabel) {
            button.contentItem.color = "white";
            button.contentItem.font.bold = true;
            button.contentItem.font.pointSize = 20;
        }
    }
    function buttonClearList(buttonClear)
    {
        buttonClear.text = qsTr("Clear List").arg(buttonClear.text);
        buttonClear.enabled = true;
        if (buttonClear.background && buttonClear.background instanceof Rectangle) {
            buttonClear.background.color = "red";
            buttonClear.background.gradient = null;
            buttonClear.background.visible = true;
        }
        if (buttonClear.contentItem && buttonClear.contentItem instanceof IconLabel) {
            buttonClear.contentItem.color = "white";
            buttonClear.contentItem.font.bold = true;
            buttonClear.contentItem.font.pointSize = 20;
        }
    }
    ColumnLayout {
        // anchors.fill: parent
        // anchors.topMargin: 0 // margin from top of the page
        Layout.fillWidth: true
        width: parent.width
        spacing: 5
        Button {
            id: button1
            text: "Select Robot"
            width: parent.width
            onClicked: selectDialog()
            Layout.fillWidth: true
            font.pointSize: 20
        }
        Button {
            id: dialogA
            text: "Freddie Mercury: Connected"
            visible: dialogId === 1
            Layout.fillWidth: true
            font.pointSize: 20
            spacing: 10
            onClicked: {
                buttonClick(this)
            }
            ColumnLayout {
                anchors.fill: parent
                anchors.topMargin: 50 // margin from top of the page
                Layout.fillWidth: true
                spacing: 10
                GroupBox {
                    id: box1
                    width: parent.width
                    title: "Connection"
                    font.pointSize: 20
                    Layout.fillWidth: parent
                    spacing: 10
                    GridLayout {
                        width: parent.width
                        columns: 1
                        RowLayout {
                            id: row1
                            spacing: 200
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Label {
                                id: textField
                                text: "Connection:"
                                font.pointSize: 15
                                Layout.fillWidth: true
                            }
                            Text {
                                id: connected
                                text: "Not-Connected"
                                color: "red"
                                font.pointSize: 15
                                horizontalAlignment: Text.AlignRight
                                Layout.fillWidth: true
                            }
                        }
                    }
                }
                Button {
                    id: clist
                    text: "Clear List";
                    Layout.fillWidth: true
                    font.pointSize: 20
                    width: parent.width
                    onClicked: {
                        buttonClearList(this)
                    }
                }
            }
        }
    }
}

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

Page {
    signal onButtonClicked(var buttonId)
    Component.onCompleted: {
        button1.clicked.connect(function() {
            onButtonClicked(1);
        });
    }
    ColumnLayout {
        id: mybuttons
        anchors.fill: parent
        spacing: 5
        Button {
            id: button1
            Layout.fillWidth: true
            Layout.fillHeight: true
            text: "Freddie Mercury"
            font.pointSize: 20
        }
    }
}

到目前为止，我一直在尝试在不同的位置定位

ColumnLayout

的不同组合。但我的怀疑是：我已经有了一个

ColumnLayout

，之后我又有了一个

ColumnLayout

，我认为它们正在互相覆盖。 然而，在嵌套循环中使用它时，从另一个角度来看，也可以咨询其他re。 同样的，关于

列

如何成为

定位器

，而

列布局

如何成为布局。 我确信我使用的方法是正确的，但是缺少了一些东西。

---

请指出解决此问题的正确方向。

基本设计规则：如果父项被禁用，则子项也被禁用

说明：

在您的情况下，ColumnLayout是按钮的子项，这是您的子项的其他项目的容器，因此，如果按钮被上一个ColumnLayout规则禁用，它也将被禁用，因此ColumnLayout的全部内容也将被禁用

解决方案：

在您的情况下，ColumnLayout不必是Button的子级，但它可以位于同一级别

---

另一方面，您还有其他错误：

• 如果要使用Layout.XXX，则不应使用widths.YYY，因为它们完成相同的任务，但如果同时使用这两个选项，则可能会出现问题，因为它们会相互竞争，因此可能会有不确定的行为

---

提供一个@eyllanesc，非常感谢您阅读我的问题，这里可以找到最小的可验证示例我还更新了问题添加了它，因此它是可用的我没有要求您提供链接，我要求您提供一个MRE，根据定义，它应该是一个代码，应该在您的问题中，允许您进行复制粘贴，然后执行它，然后重现您的问题。我想根据你在这个网站上的经验，你知道我的意思。对不起，给我一分钟