QT信号在QML中未定义且无法触发问题求助

我在使用Qt信号机制时遇到问题，查阅多篇文档仍未解决。现有一个存放后端函数的BackendService.qml和作为根组件的main.qml，希望在认证成功后更新登录状态变量，但信号始终无法正常工作。尝试过直接用connect()方法和Connections组件，都没有效果，调用connect()后返回undefined，但backendService和信号本身确实存在且状态正常。

现有代码 #

BackendService.qml

import QtQuick 2.0

QtObject {
    property bool userLoggedIn: false
    property string api: "http://localhost:8080"

    signal userLoggedInChangedSignal(bool value)

    onUserLoggedInChanged: {
        userLoggedInChangedSignal(userLoggedIn)
    }

    Component.onCompleted: {
        userLoggedInChangedSignal.connect(test)
    }

    function test(asd){
        console.log(asd)
    }

    function login(username, password) {
        var xhr = new XMLHttpRequest();
        var url = api + "/login";
        xhr.open('POST', url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    userLoggedIn = true;
                } else {
                    console.log('Login error:', xhr.status, xhr.statusText);
                }
            }
        }
        var params = "username=" + username + "&password=" + password;
        xhr.send(params);
    }
}

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    BackendService {
        id: backendService
    }

    Component.onCompleted: {
        var test = backendService.userLoggedInChangedSignal.connect(mainWindow.updateView);
        console.log(test)
    }

    function updateView(loggedIn) {
        console.log(loggedIn)
        root.currentIndex = backendService.userLoggedIn ? 1 : 0;
    }
}

main.cpp

// main.cpp
#include <QGuiApplication>
#include <QQuickView>
#include <QQmlEngine>

int main(int argc, char *argv[]) {
    QGuiApplication app(argc, argv);

    QQuickView viewer;
    viewer.engine()->addImportPath("qrc:/qml/frontend/");  // Adjust path as needed
    viewer.setSource(QUrl("qrc:/qml/frontend/main.qml"));  // Adjust path as needed
    viewer.setResizeMode(QQuickView::SizeRootObjectToView);
    viewer.setTitle("Task Manager");
    viewer.show();

    QObject::connect(viewer.engine(), &QQmlEngine::quit, &app, &QCoreApplication::quit);

    return app.exec();
}

问题分析与解决方案 #

1. 冗余的自定义信号

QML中所有属性默认自带属性名Changed信号，比如userLoggedIn属性会自动生成userLoggedInChanged信号，不需要手动定义userLoggedInChangedSignal，自定义信号的连接方式在QML中写法有误，这是导致连接失败返回undefined的核心原因。

2. main.qml中root未定义

updateView函数里的root.currentIndex引用了未定义的root对象，这会导致函数执行报错，即使信号触发也无法正常更新视图。

3. 信号连接的正确方式

推荐使用QML原生的Connections组件来连接信号，或者直接利用属性绑定，这两种方式在Qt 5.14.2中更可靠。

修改后的代码 #

BackendService.qml（简化版）

import QtQuick 2.0

QtObject {
    property bool userLoggedIn: false
    property string api: "http://localhost:8080"

    // 移除自定义信号，使用属性自带的userLoggedInChanged信号
    Component.onCompleted: {
        // 测试属性自带信号
        userLoggedInChanged.connect(test)
    }

    function test(value){
        console.log("Backend内部测试:", value)
    }

    function login(username, password) {
        var xhr = new XMLHttpRequest();
        var url = api + "/login";
        xhr.open('POST', url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    userLoggedIn = true;
                } else {
                    console.log('Login error:', xhr.status, xhr.statusText);
                }
            }
        }
        var params = "username=" + username + "&password=" + password;
        xhr.send(params);
    }
}

main.qml（修复版）

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    // 定义页面容器，替换为你的实际根容器
    StackView {
        id: root
        anchors.fill: parent
        initialItem: loginPage
    }

    // 登录页示例
    Component {
        id: loginPage
        Column {
            anchors.centerIn: parent
            spacing: 10
            TextField { id: usernameInput; placeholderText: "用户名" }
            TextField { id: passwordInput; placeholderText: "密码"; echoMode: TextInput.Password }
            Button {
                text: "登录"
                onClicked: backendService.login(usernameInput.text, passwordInput.text)
            }
        }
    }

    // 登录后主页面示例
    Component {
        id: mainPage
        Text { text: "登录成功!"; anchors.centerIn: parent }
    }

    BackendService {
        id: backendService
    }

    // 使用Connections组件连接信号
    Connections {
        target: backendService
        onUserLoggedInChanged: {
            console.log("登录状态更新:", backendService.userLoggedIn)
            // 根据登录状态切换页面
            if (backendService.userLoggedIn) {
                root.replace(mainPage)
            } else {
                root.replace(loginPage)
            }
        }
    }
}

额外说明 #

• 如果坚持使用connect()方法，正确写法是backendService.userLoggedInChanged.connect(updateView)，无需加mainWindow.（因为updateView是当前组件的函数），但Connections组件是QML中更推荐的方式，可读性和维护性更好。
• 确保main.qml中的容器组件ID与代码中的root一致，或者替换为你实际使用的容器ID。

内容的提问来源于stack exchange，提问作者Márk Göbölös