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

问题描述 投票:0回答:1

[从我的previous post成功设计了一个小型应用程序的布局之后,我正在添加事件的逻辑。我几乎完成了它,但是某些事件并未按照我的计划进行。在逻辑和完整的源代码here下面,以防需要验证:

[1)如下图所示,选择了要连接的机器人后,它确实表明我正在连接,但我根本无法与QML页面进行交互,并且所有操作均被阻止。我认为这可能是由于我有2 ColumnLayout,并且我认为一个人正在覆盖另一个人,但是我不确定为什么会这样,因为我认为逻辑是完整的:

“

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9zWnhBMTBtLnBuZyJ9” alt =“ 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();
}

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

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

Page2.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,我认为它们彼此覆盖。但是,从official documentation开始并参考其他sources,在嵌套循环中使用它也不成问题。相同的post讨论Column如何是Positioner,而ColumnLayout是布局。我确定我使用的方式正确,但是缺少某些东西。请指出正确的方向来解决此问题。

qt qml qt5
1个回答
1
投票

基本设计规则:如果父项也被禁用,子项也将被禁用。

说明:

在您的情况下,ColumnLayout是Button的子项,这是作为您子项的其他项的容器,因此,如果以前的ColumnLayout规则禁用了Button,那么它也将是,因此也是整个内容的列布局。

解决方案:

在您的情况下,ColumnLayout不必是Button的子级,但是可以在同一级别上。


另一方面,您还有其他错误:

  • 如果要使用Layout.XXX,则不应使用widths.YYY,因为它们可以完成相同的任务,但是如果您同时使用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)
                }
            }
        }
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.