Qt中MVVM框架的实践探索与落地实现

用户015677980408
0 阅读12分钟

前言

在Qt开发领域，随着项目规模扩大和需求复杂度提升，传统的“UI与业务逻辑耦合”开发模式逐渐暴露出可维护性差、测试难度高、迭代效率低等问题。MVVM（Model-View-ViewModel）作为一种旨在解耦UI与业务逻辑的设计模式，借助Qt自身的QObject属性系统、信号与槽机制以及QML声明式绑定特性，能够有效解决上述痛点，成为现代Qt Quick项目的首选架构。本文结合实际开发场景，详细讲解Qt中MVVM框架的核心思想、分层实现、代码落地及实践技巧，帮助开发者快速掌握MVVM模式的应用方法。

一、MVVM框架核心原理与Qt适配性

1.1 MVVM核心架构解析

MVVM模式将应用分为三大核心层，各层职责清晰、互不耦合，通过数据绑定实现协同工作，其核心逻辑可概括为“中介隔离、双向同步”：

  • Model（模型层）：负责数据存储、业务逻辑处理与数据验证，是应用的“数据核心”。它不依赖任何UI相关代码，仅关注数据本身的增删改查和业务规则，对外提供数据访问接口和状态变更通知，相当于应用的“厨房”，只负责准备“食材”（数据）。

  • View（视图层）：负责UI展示与用户交互，是应用的“脸面”。它不包含任何业务逻辑，仅通过数据绑定关联ViewModel，接收用户操作并转发给ViewModel，同时同步展示ViewModel暴露的数据，相当于“服务员”，只负责“上菜”（展示数据）和“传菜”（转发操作）。

  • ViewModel（视图模型层）：作为Model与View之间的“中介”，负责将Model的数据转换为View可直接绑定的形式，同时处理View转发的用户交互指令，并同步更新Model的数据。它不持有任何UI组件引用，完全与View解耦，既可以暴露可绑定的属性供View使用，也可以提供命令接口处理用户操作，相当于“领班”，协调“厨房”与“服务员”的协同。

与传统Qt开发中常用的MVC模式相比，MVVM的核心优势在于数据绑定——View与ViewModel通过绑定机制自动同步，无需手动编写大量的信号槽连接代码，大幅减少样板代码；同时ViewModel的解耦特性，使其可独立于UI进行单元测试，提升代码可靠性。

1.2 Qt对MVVM的原生支持 Qt虽然没有内置专门的MVVM框架，但凭借其自身特性，能够完美适配MVVM模式的实现，核心依赖以下技术：

  • QObject属性系统：通过Q_PROPERTY宏定义可被绑定的属性，配合read、write、notify函数，实现属性的读写与状态通知，是ViewModel暴露数据的核心方式。

  • 信号与槽机制：作为Qt的核心通信机制，用于Model与ViewModel、ViewModel与View之间的状态同步，是数据绑定的底层支撑。

  • QML声明式绑定：QML天生支持声明式数据绑定，能够简洁地将View控件与ViewModel的属性关联，实现“数据变化自动更新UI，UI操作自动同步数据”的双向绑定效果，是View层实现的最佳选择。

  • 辅助工具与第三方库：Qt提供QQmlPropertyMap等原生工具简化动态属性绑定，同时还有ReactiveQt、Vali等第三方库，可进一步增强MVVM的响应式编程能力和开发效率，适用于复杂项目场景。

需要注意的是，Qt中MVVM的落地有两种常见场景：QML+C++（View用QML，ViewModel和Model用C++）、纯QML（三层均用QML实现）。其中，QML+C++的组合兼顾了UI的灵活性和业务逻辑的高效性，是工业界最常用的实现方式，本文也将围绕该组合展开实践讲解。

二、Qt MVVM实践落地：完整案例实现

本次实践将开发一个“用户信息管理工具”，实现用户信息的添加、查询、删除功能，完整覆盖MVVM三层架构的实现，同时演示数据绑定、命令处理、状态同步等核心特性。开发环境：Qt 6.5 + Qt Quick Controls 2，采用QML+C++组合模式。

2.1 项目整体结构

首先规划项目目录结构，明确各层代码的划分，确保架构清晰：

QtMVVMDemo/
├── model/                  // Model层：数据与业务逻辑
│   ├── User.h              // 用户实体类（数据模型）
│   ├── UserInfoModel.h     // 用户数据管理类（业务逻辑）
│   └── UserInfoModel.cpp
├── viewmodel/              // ViewModel层：中介与数据转换
│   ├── UserInfoViewModel.h // 用户视图模型（绑定View与Model）
│   └── UserInfoViewModel.cpp
├── view/                   // View层：UI界面（QML）
│   ├── main.qml            // 主界面
│   ├── InfoShow.qml		// 用户信息显示界面
│   └── qml.qrc				// qml资源文件
├── main.cpp                // 程序入口：注册ViewModel到QML
└── QtMVVMDemo.pro          // 项目配置文件

2.2 Model层实现：数据与业务逻辑封装

Model层的核心是“数据封装+业务逻辑”，需保证与UI完全解耦，仅连接ViewModel信号，进行数据封装和更新ViewModel

用户数据管理类（UserInfoModel.h/.cpp）

代码如下（示例）：

#include "UserInfoModel.h"
#include <QDebug>

UserInfoModel::UserInfoModel(QObject* parent) : QObject(parent)
{
    m_viewModel = UserInfoViewModel::getInstance();
    connect(m_viewModel, &UserInfoViewModel::requestUpdateInfo, this, &UserInfoModel::onSigRequestUpdateInfo);
}

UserInfoModel::~UserInfoModel()
{
}

void UserInfoModel::onSigRequestUpdateInfo()
{
    // 可以添加一些业务逻辑，比如从数据库中获取或设置参数
    // TUDO 耗时操作可以写在线程中

    // 然后更新 viewModel 的属性值
    qDebug() << "onSigRequestUpdateInfo";
    static int count = 0;
    count++;
    m_viewModel->setUserName("Updated Name " + QString::number(count));
    m_viewModel->setUserAge(20 + count);
}


#pragma once

#include "UserInfoViewModel.h"
#include <QObject>

class UserInfoModel : public QObject
{
    Q_OBJECT
public:
    explicit UserInfoModel(QObject* parent = nullptr);
    ~UserInfoModel();
    static UserInfoModel& getInstance()
    {
        static UserInfoModel instance;
        return instance;
    }

private slots:
    void onSigRequestUpdateInfo();

private:
    UserInfoViewModel* m_viewModel;
};

2.3 ViewModel层实现：中介与数据绑定适配

ViewModel层是MVVM的核心，负责连接Model与View，核心职责包括：暴露View可绑定的属性、通知用户操作到Model。本次实现UserInfoViewModel类，封装View所需的所有数据和操作。

2.3.1 用户视图模型（UserViewModel.h/.cpp）

#include "UserInfoViewModel.h"
#include <QDebug>

UserInfoViewModel::UserInfoViewModel(QObject* parent) : QObject(parent)
{
    m_userName = "Initial Name";
    m_userAge  = 18;
}

UserInfoViewModel* UserInfoViewModel::getInstance()
{
    static UserInfoViewModel instance;
    return &instance;
}

QString UserInfoViewModel::getUserName() const
{
    QReadLocker locker(&m_dataLock);
    return m_userName;
}

void UserInfoViewModel::setUserName(const QString& name)
{
    bool changed = false;
    {
        QWriteLocker locker(&m_dataLock);
        if (m_userName != name)
        {
            m_userName = name;
            changed    = true;
        }
    }
    // 释放锁后再发送信号，避免 QML 立即读取属性导致的死锁
    if (changed)
    {
        emit userNameChanged();
    }
}

int UserInfoViewModel::getUserAge() const
{
    QReadLocker locker(&m_dataLock);
    return m_userAge;
}

void UserInfoViewModel::setUserAge(int age)
{
    bool changed = false;
    {
        QWriteLocker locker(&m_dataLock);
        if (m_userAge != age)
        {
            m_userAge = age;
            changed   = true;
        }
    }
    // 释放锁后再发送信号，避免 QML 立即读取属性导致的死锁
    if (changed)
    {
        emit userAgeChanged();
    }
}

void UserInfoViewModel::updateInfo()
{
    emit requestUpdateInfo();
    // 使用 getter 获取值以保证线程安全且不持有锁
    qDebug() << "Updated info:" << getUserName() << getUserAge();
}


#ifndef USERINFOVIEWMODEL_H
#define USERINFOVIEWMODEL_H

#include <QObject>
#include <QReadWriteLock>

class UserInfoViewModel : public QObject
{
    Q_OBJECT
    friend class UserInfoModel;
    Q_PROPERTY(QString userName READ getUserName WRITE setUserName NOTIFY userNameChanged)
    Q_PROPERTY(int userAge READ getUserAge WRITE setUserAge NOTIFY userAgeChanged)

public:
    static UserInfoViewModel* getInstance();

    // 获取属性值 （qml 读取时会间接调用）
    QString getUserName() const;
    int     getUserAge() const;

public:
    // 供 qml 调用的方法
    Q_INVOKABLE void updateInfo();

private:
    explicit UserInfoViewModel(QObject* parent = nullptr);

    // 设置属性值 （qml 写入时会间接调用）
    void setUserName(const QString& name);
    void setUserAge(int age);

signals:
    // 属性变化信号 （引起变化时会触发）
    void userNameChanged();
    void userAgeChanged();

signals:
    // 向model请求更新数据
    void requestUpdateInfo();

private:
    mutable QReadWriteLock m_dataLock;  // 数据锁，保护属性的并发访问
    QString                m_userName;
    int                    m_userAge;
};

#endif  // USERINFOVIEWMODEL_H

ViewModel的核心设计要点：

  • 不直接操作UI，仅通过Q_PROPERTY暴露View所需的属性，所有属性变化均发送信号，供View绑定。

  • 持有Model实例，通过调用Model的业务接口处理用户操作，实现“业务逻辑委托”，自身不包含业务逻辑。

  • 监听Model的信号，当Model数据变化时，同步更新自身属性，确保View能够及时展示最新数据。

  • 通过Q_INVOKABLE暴露操作命令，供QML中的控件（如按钮）调用，实现用户交互的转发。

2.4 View层实现：QML界面与数据绑定

View层采用QML实现，仅负责UI展示和用户交互，通过声明式绑定关联ViewModel的属性和方法，不包含任何业务逻辑。本次实现InfoShow.qml，包含用户列名称、用户年龄、更新等功能控件。

// InfoShow.qml
import Mvvm.Test 1.0
import QtQuick 2.12
import QtQuick.Controls 2.12

Item {
    id: _root

    width: 640
    height: 480
    visible: true

    Column {
        anchors.centerIn: parent
        spacing: 20

        Text {
            text: "MVVM Example (Singleton)"
            font.bold: true
            font.pointSize: 24
            anchors.horizontalCenter: parent.horizontalCenter
        }

        // Binding to ViewModel properties (Directly using Type name)
        Text {
            text: "Name: " + UserInfoViewModel.userName
            font.pointSize: 18
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Text {
            text: "Age: " + UserInfoViewModel.userAge
            font.pointSize: 18
            anchors.horizontalCenter: parent.horizontalCenter
        }

        // Command to ViewModel
        Button {
            text: "Update Info"
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: UserInfoViewModel.updateInfo()
        }

        Button {
            id: _backButton

            text: "Back"
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                // Use attached property on the root item to access the StackView
                if (_root.StackView.view)
                    _root.StackView.view.pop();

            }
        }

    }

}


//main.qml
import QtQuick 2.15
import QtQuick.Controls 2.12
import QtQuick.Window 2.15

ApplicationWindow {
    id: _root

    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    StackView {
        id: _stackView

        anchors.fill: parent
        initialItem: null
        Component.onCompleted: {
            push("qrc:/InfoShow.qml");
        }
    }

}

View层的核心设计要点：

  • 通过“viewModel.属性名”的方式，实现View与ViewModel的属性绑定，例如Text 的modelview绑定UserInfoViewModel.userName。

  • 用户操作（如按钮点击）直接调用ViewModel的Q_INVOKABLE方法，不直接操作Model，确保交互逻辑的解耦，如Button的按下触发UserInfoViewModel.updateInfo()。

  • 不包含任何业务逻辑判断（如数据合法性校验），所有校验和业务处理均委托给ViewModel和Model。

2.5 程序入口：注册ViewModel到QML

在main.cpp中，创建ViewModel实例，并将其注册到QML上下文，使QML能够访问ViewModel的属性和方法。

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "UserInfoViewModel.h"
#include "UserInfoModel.h"

int main(int argc, char* argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
    // 设置高DPI缩放属性
    QGuiApplication::setAttribute(Qt::AA_UseOpenGLES);
    QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    // qmlRegisterType<UserInfoViewModel>("Mvvm.Test", 1, 0, "UserInfoViewModel");
    qmlRegisterSingletonInstance("Mvvm.Test", 1, 0, "UserInfoViewModel", UserInfoViewModel::getInstance());
    UserInfoModel& model = UserInfoModel::getInstance();

    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();
}

2.6 项目配置（.pro文件） 确保项目正确引入所需模块，配置头文件路径和源文件。

QT += quick

# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0

SOURCES += $$files(viewmodel/*.cpp, true)
SOURCES += $$files(model/*.cpp, true)

HEADERS += $$files(viewmodel/*.h, true)
HEADERS += $$files(model/*.h, true)

INCLUDEPATH += viewmodel
INCLUDEPATH += model

RESOURCES += view/qml.qrc
SOURCES += main.cpp
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH += $$PWD/view

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH += $$PWD/view

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

三、实践效果与核心特性验证

3.1 功能验证

编译运行项目，可实现以下功能，验证MVVM各层的协同工作：

  • 更新用户信息：点击update info可以看到Name和Age的更新 在这里插入图片描述

3.2 核心特性验证

  • 解耦性：View层仅负责UI，修改UI样式（如按钮颜色、列表布局）无需改动ViewModel和Model；Model层修改业务逻辑（如添加数据校验）无需改动View和ViewModel，各层独立迭代。

  • 数据绑定：ViewModel的属性变化后，View自动同步更新，无需手动编写信号槽连接代码；View的操作（如输入框输入）通过绑定同步到ViewModel，实现双向同步。

  • 可测试性：ViewModel和Model均为纯C++类，不依赖UI，可单独编写单元测试，验证业务逻辑的正确性（如添加重复ID的用户、删除不存在的用户等场景）。

四、Qt MVVM实践技巧与避坑指南

4.1 实践技巧

  1. ViewModel的设计原则：遵循“单一职责”，一个ViewModel对应一个View或一个功能模块，避免ViewModel过于庞大；不持有任何UI控件指针，仅通过属性和信号与View交互。

  2. 数据绑定优化：对于复杂列表或大量数据，使用QAbstractListModel替代QList作为ViewModel的列表属性，提升数据绑定效率；使用QQmlPropertyMap实现动态属性绑定，简化ViewModel的代码编写。

  3. 信号槽管理：确保Model与ViewModel、ViewModel与View之间的信号槽正确连接，避免内存泄漏；使用Qt的connect函数时，指定合适的连接方式（如QueuedConnection），避免线程安全问题。

  4. 第三方库应用：复杂项目中可引入ReactiveQt实现响应式编程，简化状态管理；使用Vali等轻量级MVVM框架，减少重复代码，提升开发效率。

4.2 常见坑点与解决方案

  • 坑点1：属性未添加notify信号：Q_PROPERTY未声明notify信号，导致View无法感知属性变化，UI无法同步更新。解决方案：所有需要绑定的属性，必须添加notify信号，并在setter方法中发送该信号。

  • 坑点2：ViewModel持有UI指针：在ViewModel中直接操作UI控件（如QPushButton、QLabel），导致View与ViewModel耦合，无法独立测试。解决方案：ViewModel仅暴露属性和命令，UI操作由View通过绑定完成，不允许ViewModel直接操作UI。

  • 坑点3：数据绑定循环：View与ViewModel的属性双向绑定不当，导致循环更新（如View的输入框绑定ViewModel的属性，ViewModel的属性又绑定回输入框）。解决方案：明确绑定方向，必要时使用单向绑定，避免循环依赖。

  • 坑点4：Model数据变化未通知：Model修改数据后未发送信号，导致ViewModel无法感知数据变化，View无法同步更新。解决方案：Model的所有数据操作（增删改）后，必须发送对应的信号，供ViewModel监听。

五、总结与扩展

本文通过一个完整的用户信息管理案例，详细讲解了Qt中MVVM框架的核心原理、分层实现和落地步骤，验证了MVVM模式在解耦UI与业务逻辑、提升代码可维护性和可测试性方面的优势。Qt的QObject属性系统、信号与槽机制以及QML声明式绑定，为MVVM的实现提供了天然支持，无需依赖第三方框架即可完成基础MVVM架构的搭建。

在实际项目中，可根据项目规模和需求，对MVVM架构进行扩展：

  • 复杂数据场景：引入QAbstractListModel、QSortFilterProxyModel等，实现列表数据的排序、过滤，提升大数据量场景下的性能。

  • 响应式编程：使用ReactiveQt库，实现数据流的流式处理，简化状态管理，提升代码的可读性和可维护性。

  • 单元测试：为ViewModel和Model编写单元测试，使用QTest框架验证业务逻辑的正确性，提升代码可靠性。

  • 跨平台适配：结合Qt Quick Controls 2，实现Windows、macOS、Linux等多平台适配，MVVM架构的解耦特性可大幅降低跨平台开发的复杂度。

MVVM模式并非万能，对于小型工具类项目，传统的开发模式可能更高效；但对于中大型Qt Quick项目，MVVM架构能够有效解决代码耦合、维护困难等问题，是提升开发效率和代码质量的最佳实践之一。希望本文的实践探索，能够帮助开发者快速掌握Qt中MVVM的应用方法，打造高质量、可维护的Qt应用。

avatar
文章
阅读
粉丝