首页 > 代码库 > 第55课 模型视图设计模式

第55课 模型视图设计模式

1. 模型视图模式

(1)模型视图设计模式的核心思想

  ①模型(数据)与视图(显示)相分离

  ②模型对外提供标准接口存取数据(不关心数据如何显示)

  ③视图自定义数据的显示方式(不关心数据如何组织存储)

(2)模型视图模式的直观理解

技术分享 

(3)模型视图模式的工作机制

  ①当数据发生改变时模型发出信号通知视图

  ②当用户与视图进行交互时视图发出信号提供交互信息

2. Qt中的模型-视图类层次结构

(1)Qt中的模型类的层次结构

技术分享 

(2)Qt中的视图类的层次结构

技术分享 

3. 关键技术问题

(1)模型如何为数据提供统一的访问方式

  ①在Qt中,不管模型以什么结构组织数据,都必须为每一个数据提供独一无二的索引;

  ②视图通过索引访问模型中的具体数据。

(2)模型视图编程示例

//定义文件系统模型
QFileSystemModel fsModel; 
//定义树型显示视图
QTreeView treeView;
//当前工作目录
QString path = QDir::currentPath();

//从当前工作目录中取数据
fsModel.setRootPath(path);
//连接模型与视图
treeView.setModel(&fsModel);

//设置树形视图的数据索引,从根部开始显示工作目录中的内容
treeView.setRootIndex(fsModel.index(path));

【编程实验】模型视图结构的初探

 //main.cpp

技术分享
#include "Widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}
View Code

//Widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QFileSystemModel>
#include <QTreeView>

class Widget : public QWidget
{
    Q_OBJECT

    QFileSystemModel m_fsModel;
    QTreeView m_treeView;

public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

//Widget.cpp

#include "Widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    m_treeView.setParent(this);
    m_treeView.move(10, 10);
    m_treeView.resize(500, 300);

    m_fsModel.setRootPath(QDir::currentPath());

    m_treeView.setModel(&m_fsModel);

    m_treeView.setRootIndex(m_fsModel.index(QDir::currentPath()));
}

Widget::~Widget()
{

}

4. 小结

(1)Qt中内置支持了模型视图的开发方式

(2)模型用于组织数据源,不关心数据的显示方式

(3)视图用于定义数据的显示方式,不关心数据的组织方式

(4)Qt中的模型必须为每一个数据提供独一无二的索引

(5)Qt中的视图通过索引访问模型中的数据

第55课 模型视图设计模式