[从我的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
是布局。我确定我使用的方式正确,但是缺少某些东西。请指出正确的方向来解决此问题。
基本设计规则:如果父项也被禁用,子项也将被禁用。
说明:
在您的情况下,ColumnLayout是Button的子项,这是作为您子项的其他项的容器,因此,如果以前的ColumnLayout规则禁用了Button,那么它也将是,因此也是整个内容的列布局。
解决方案:
在您的情况下,ColumnLayout不必是Button的子级,但是可以在同一级别上。
另一方面,您还有其他错误:
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)
}
}
}
}
}