qml 使用 Loader 实现登录

以下是一个简单的示例代码，使用 Loader 实现登录功能。

首先，在主界面中添加一个 Loader 组件，用于加载登录界面：

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    Loader {
        id: loginLoader
        anchors.fill: parent
    }
}

接着，在主界面中添加一个按钮，点击后加载登录界面：

Button {
    text: "登录"
    onClicked: {
        loginLoader.source = "Login.qml"
    }
}

在 Login.qml 文件中，可以定义登录界面的样式和逻辑。例如，下面是一个简单的登录界面，包含两个文本框和一个按钮：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    TextInput {
        id: usernameInput
        anchors.top: parent.top
        width: parent.width
        placeholderText: "用户名"
    }

    TextInput {
        id: passwordInput
        anchors.top: usernameInput.bottom
        width: parent.width
        placeholderText: "密码"
        echoMode: TextInput.Password
    }

    Button {
        text: "登录"
        anchors.top: passwordInput.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        onClicked: {
            // 在这里执行登录逻辑
        }
    }
}

在按钮的 onClicked 信号中，可以执行登录逻辑，例如验证用户名和密码是否正确。如果登录成功，可以在主界面中显示其他内容，例如一个欢迎消息：

Rectangle {
    width: 400
    height: 400

    Loader {
        id: loginLoader
        anchors.fill: parent
        onLoaded: {
            // 登录成功后显示欢迎消息
            if (username === "admin" && password === "123456") {
                loginLoader.source = "Welcome.qml"
            }
        }
    }
}

在 Welcome.qml 文件中，可以定义欢迎消息的样式和内容，例如：

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    Text {
        text: "欢迎，" + usernameInput.text
        font.pointSize: 20
        anchors.centerIn: parent
    }
}

这样，使用 Loader 就可以实现登录功能了。当用户点击登录按钮时，会加载 Login.qml 文件，并在其中执行登录逻辑。如果登录成功，会加载 Welcome.qml 文件，并显示欢迎消息。