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

Question

在我之前的文章中成功设计了一个小应用程序的布局后，我正在添加事件的逻辑。 我几乎完成了它，但有些事件没有按照我的计划发生。 下面的逻辑和完整的源代码在这里以防万一想验证：

1)一旦我选择了要连接的机器人，如下所示，它确实显示我正在连接，但我根本无法与QML页面交互，并且所有操作都被阻止。 我认为这可能是由于我有 2 个ColumnLayout并且我认为一个正在覆盖另一个，但我不确定为什么会发生这种情况，因为我认为逻辑是完整的：

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

在构成问题的最小可重现示例的代码中最重要的部分下面：

主程序

#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();
}

主文件

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
    }
}

页面1.qml

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)
                    }
                }
            }
        }
    }
}

页面2.qml

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 ，我认为它们正在相互覆盖。 但是，从官方文档和参考其他来源来看，在嵌套循环中使用它是没有问题的。 同一篇文章讨论了Column是一个Positioner ，而ColumnLayout是一个 Layout 。 我确信我以正确的方式使用，但缺少一些东西。 请指出解决此问题的正确方向。

Answer 1

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

解释：

在您的情况下，ColumnLayout 是 Button 的子项，这是作为您的子项的其他项的容器，因此如果 Button 被先前的 ColumnLayout 规则禁用，它也将是，因此也是列布局。

解决方案：

在您的情况下，ColumnLayout 没有必要成为 Button 的子级，但它可以处于同一级别。

---

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

• 如果您打算使用 Layout.XXX，那么您不应该使用 widths.YYY，因为它们完成相同的任务，但是如果您同时使用两者，您可能会遇到问题，因为它们可能会产生不确定的行为，因为它们会相互竞争。

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

import QtQuick.Controls.impl 2.12  // for IconLabel

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 {
        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 {
            id: layout
            visible: dialogId === 1
            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
                visible: dialogId === 1
                text: "Clear List";
                Layout.fillWidth: true
                font.pointSize: 20
                width: parent.width
                onClicked: {
                    buttonClearList(this)
                }
            }
        }
    }
}