qt MVVM框架例程

以下是一个使用Qt和MVVM模式的简单示例程序：

main.cpp:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

#include "viewmodel.h"

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

    QQmlApplicationEngine engine;

    ViewModel viewModel;
    engine.rootContext()->setContextProperty("viewModel", &viewModel);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

viewmodel.h:

#ifndef VIEWMODEL_H
#define VIEWMODEL_H

#include <QObject>
#include <QString>

class ViewModel : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

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

    QString name() const;
    void setName(const QString &name);

signals:
    void nameChanged();

private:
    QString m_name;
};

#endif // VIEWMODEL_H

viewmodel.cpp:

#include "viewmodel.h"

ViewModel::ViewModel(QObject *parent) : QObject(parent)
{
}

QString ViewModel::name() const
{
    return m_name;
}

void ViewModel::setName(const QString &name)
{
    if (name != m_name) {
        m_name = name;
        emit nameChanged();
    }
}

main.qml:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "MVVM Example"

    Column {
        anchors.centerIn: parent
        spacing: 10

        Label {
            text: "Name:"
        }

        TextField {
            id: nameField
            width: parent.width
        }

        Button {
            text: "Set Name"
            onClicked: {
                viewModel.name = nameField.text
            }
        }

        Label {
            text: "Hello, " + viewModel.name
        }
    }
}

在这个示例中，ViewModel 类继承自 QObject，并使用 Q_PROPERTY 定义了一个名为 name 的属性。在 main.cpp 中，我们创建了一个 ViewModel 实例，并将其设置为 QML 上下文的属性。在 main.qml 中，我们使用 TextField 组件输入一个名称，并将其设置为 ViewModel 的 name 属性。Label 组件则根据 ViewModel 的 name 属性来显示相应的文本。

当用户在 TextField 中输入名称并点击按钮时，ViewModel 的 name 属性将被更新，并触发 nameChanged 信号。Label 组件会监听该信号，并根据新的 name 属性值来更新显示的文本。

这个示例只是一个简单的演示，你可以根据自己的需求扩展和优化代码。希望对你有所帮助！