Qt编程中实现数据驱动界面更新

在Qt编程中，用户界面往往会显示各种各样的数据，当这些数据多了之后，往往不易管理。本文分享一种通过数据驱动界面更新的方法，统一界面数据的设置入口，利用键值对存储数据，同时达到数据和界面相分离的目的。

基本思想

1. 数据与界面相分离，采用键值对的方式存储用户界面需要显示的数据；
2. 当数据发生改变时，发送信号通知界面更新；
3. 当用户操作界面时，返过去更新数据存储。

界面类MyWidget

mywidget.h

#ifndef MYWIDGET_H
#define MYWIDGET_H
#include 
namespace Ui {
class MyWidget;
}
class MyWidget : public QWidget
{
    Q_OBJECT
public:
    explicit MyWidget(QWidget *parent = 0);
    ~MyWidget();
    //数据设置方法，通过键值对(字典)的方式设置数据。
    //由updateUi参数决定数据设置之后是否通知界面更新
    void setData(const QString &key, QVariant &data,bool updateUi = true);
signals:
    //数据发生改变之后发送此信号
    void onDataChanged(const QString& key,QVariant& data);
private slots:
    //根据键值对将数据更新到界面控件中
    void updateUi(const QString& key,QVariant& data);
    //用户操作界面控件之后，反向更新数据
    void on_lineEditKey1_textChanged(const QString &arg1);
    void on_lineEditKey2_textChanged(const QString &arg1);
    void on_lineEditKey3_textChanged(const QString &arg1);
private:
    Ui::MyWidget *ui;
    QVariantHash m_data;//数据存储成员变量
};
#endif // MYWIDGET_H

mywidget.cpp

#include "mywidget.h"
#include "ui_mywidget.h"
#include 
MyWidget::MyWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MyWidget)
{
    ui->setupUi(this);
    connect(this,SIGNAL(onDataChanged(QString,QVariant&)),this,SLOT(updateUi(QString,QVariant&)));
}

MyWidget::~MyWidget()
{
    delete ui;
}

void MyWidget::setData(const QString &key, QVariant &data, bool updateUi)
{
    if(m_data.value(key)==data)
        return;
    m_data.insert(key,data);
    if(updateUi)
        emit onDataChanged(key,data);
}

void MyWidget::updateUi(const QString &key, QVariant &data)
{
    if(key == "key1")
    {
        ui->lineEditKey1->setText(data.toString());
    }
    else if(key == "key2")
    {
        ui->lineEditKey2->setText(data.toString());
    }
    else if(key == "key3")
    {
        ui->lineEditKey3->setText(data.toString());
    }
    else
    {
        qDebug()<<__LINE__<<__FUNCTION__<<"Data key not find.";
    }
}

void MyWidget::on_lineEditKey1_textChanged(const QString &arg1)
{
    setData("key1",QVariant::fromValue(arg1),false);
    qDebug()<<__LINE__<<__FUNCTION__<<"Data key1 is updated.";
}

void MyWidget::on_lineEditKey2_textChanged(const QString &arg1)
{
    setData("key2",QVariant::fromValue(arg1),false);
    qDebug()<<__LINE__<<__FUNCTION__<<"Data key2 is updated.";
}

void MyWidget::on_lineEditKey3_textChanged(const QString &arg1)
{
    setData("key3",QVariant::fromValue(arg1),false);
    qDebug()<<__LINE__<<__FUNCTION__<<"Data key3 is updated.";
}

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "mywidget.h"
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    m_myWidget = new MyWidget(this);
    ui->gridLayout->addWidget(m_myWidget);
}
MainWindow::~MainWindow()
{
    delete ui;
}
//通过调用MyWidget界面类的setData()函数，将数据设置到MyWidget类成员中，
//并通知界面更新
void MainWindow::on_pushButtonSetData_clicked()
{
    m_myWidget->setData(ui->comboBoxDataKey->currentText(),
                        QVariant::fromValue(ui->lineEditSetData->text()));
}

原理描述

用户通过在MainWindow界面中的操作将数据设置到MyWidget中，仅仅调用了MyWidget类的setData()方法，数据在保存的同时，自动发送onDataChanged信号，调用MyWidget类的updateUi槽函数进行界面显示更新。

扩展优化

本例中可进一步抽象出MyWidget类的基类，MyWidget继承于该基类，并将setData()和updateUi()定义为基类中的虚函数。今后每增加一个界面类，只需重写这两个虚函数就可以完成数据存储和界面更新。

运行效果

运行效果.png

源代码下载

百度网盘分享地址：
链接：https://pan.baidu.com/s/13Rueyz1mfcb1-pnjoWEazw
提取码：0a5o