如何在 Qt Design Studio 中定义 C++ 处理的 QML 中的鼠标单击和其他交互

Question

我是编写 QtQuick/QML 应用程序的新手，并且正在使用 Qt Design Studio。我遵循了一些示例，这些示例让我可以在 C++ 中处理按钮单击，并且工作正常...但我无法从 Qt Design Studio 中将 onClick 处理程序添加到我的 QML，它显示“UI 文件中不支持函数” ”。您甚至不能忽略这一点，它会阻止预览的渲染。

好吧，所以当我将 QML 文件复制到 Qt Creator 项目时，我可以将“onClick”添加到 QML 文件中的按钮，它工作正常......但我将拥有数百个这样的......并且每次我想要测试对 QML 设计的更改时，我都会将 QML 文件从 Qt Design Studio 项目复制并覆盖到我的 Qt Creator 项目中。每次进行更改时，我无法手动将数百行添加到 QML 文件中。

正确的工作流程是什么？

这里有一些代码，尽管我不确定它有多相关，因为它几乎都是样板：

main.c

MyButtonClickHandler BCH;
view.rootContext()->setContextProperty("BCH", &BCH);

ui.qml

ButtonStyleA{
    text: "Button 1"
    onClicked: BCH.buttonClicked("Button 1")
}

myButtonClickHandler.h

class MyButtonClickHandler : public QObject {
    Q_OBJECT

    public:
    explicit MyButtonClickHandler(QObject *parent = nullptr);

    Q_INVOKABLE void buttonClicked(const QString str)
    {
        qDebug() << "Button was clicked! - " + str;
    }
};

这一切都工作正常，我的问题是“ui.qml”中“onClicked：BCH.buttonClicked（“Button 1”）”行的存在就破坏了Qt Design Studio并阻止绘制GUI预览。必须有更好的方法。

Answer 1

这里的简单答案是 Qt Design Studio 不支持信号处理程序和 JS 块。查看 UI Files 文档。

.ui.qml 文件不支持以下功能：

• JavaScript 块
• 信号处理程序

在 QtDS 中创建不会破坏表单视图（2D 视图）的绑定的方法

Button {
    text: "Button"
    onClicked: console.log("clicked")
}

看起来如下

Button {
    id: button
    text: "Button"

    Connections {
        target: button
        onClicked: console.log("clicked")
    }
}

通过使用Connections，表单视图渲染器可以忽略那些 JS 块并能够渲染场景。请记住，这仅会被表单视图忽略，而不会被实时预览或实际应用程序忽略。

另一个解决方案是使用

.qml

而不是

.ui.qml

，因为它不应用护栏来引导用户使用 QtDS 支持的功能。也就是说，此解决方案通常可能会破坏表单视图和 QtDS 功能，因为不会检测到不受支持的功能。

当您选择两种解决方案之一时，您将面临 QtDS 的另一个问题，即不支持 C++ 组件，因为它们不是由 QML 运行时编译的。因此，C++ 类型将无法被识别，并且 QtDS 将输出错误。如果您想解决这个问题，您可以使用自定义 QML 类型模拟 C++ 接口，并在部署时将其替换为 C++ 对应项。