Qt：Model/View架構的簡單使用

注：Model/View架構使用要繼承QStyledItemDelegate 類，類型選擇爲Widget；

數據項中：Item；

每個Item可以關聯多個數據，每個數據用一個role（角色，任務）來作爲標識；

Qt：Display Role（0）：一般對應一個字符串，用於顯示。

Qt：User Role（32）自定義數據；

Model/View框架的核心思想是模型（數據）與視圖（顯示）相分離，模型對外提供標準接口存取數據，不關心數據如何顯示，視圖自定義數據的顯示方式，不關心數據如何組織存儲。
    Model/View框架中數據與顯示的分離，可以允許使用不同界面顯示同一數據，也能夠在不改變數據的情況下添加新的顯示界面。爲了處理用戶輸入，引入了委託（delegate）。引入委託的好處是可以自定義數據項的渲染和編輯。

頭文件:

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QString>
#include <QListWidget>
#include <QListWidgetItem>

#include "myitemdrawer.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();
public:
    void Additem(QString name,QString phone,bool male);
private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

myitemdrawer.h(繼承QStyledItemDelegate 類，類型選擇爲Widget)

#ifndef MYITEMDRAWER_H
#define MYITEMDRAWER_H

#include <QStyledItemDelegate>
#include <QRect>
#include <QPainter>
#include <QSize>
#include <QIcon>
#include <QPixmap>

class MyItemDrawer : public QStyledItemDelegate
{
    Q_OBJECT
public:
    explicit MyItemDrawer(QObject *parent = 0);
public:
    //單元格的大小設置
    QSize sizeHint(const QStyleOptionViewItem &option,
                   const QModelIndex &index) const;
    //繪圖
    void paint(QPainter *painter,
               const QStyleOptionViewItem &option,
               const QModelIndex &index) const;
signals:

public slots:

private:
    QPixmap m_man,m_woman;
};

#endif // MYITEMDRAWER_H

源文件：

main.cpp

#include "mainwindow.h"
#include <QApplication>

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

    return a.exec();
}

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    Additem("小芳","18390274819",false);
    Additem("小薇","18789057193",false);
    Additem("小強","137182904672",true);
    Additem("小剛","17890367839",true);
    //使用自定義的代理繪圖
    ui->listWidget->setItemDelegate(new MyItemDrawer(ui->listWidget));
}

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

void MainWindow::Additem(QString name, QString phone, bool male)
{
    QListWidgetItem *item = new QListWidgetItem;

    item->setData(Qt::DisplayRole,name);
    item->setData(Qt::UserRole,phone);
    item->setData(Qt::UserRole+1,male);
    ui->listWidget->addItem(item);
}

myitemdrawer.cpp

#include "myitemdrawer.h"

MyItemDrawer::MyItemDrawer(QObject *parent) :
    QStyledItemDelegate(parent),
    m_man("D:/QT_Library/Model_Vile_LianXi/icon/man.png"),
    m_woman("D:/QT_Library/Model_Vile_LianXi/icon/woman.png")
{

}

QSize MyItemDrawer::sizeHint(const QStyleOptionViewItem &option,
                             const QModelIndex &index) const
{
    QSize size = QStyledItemDelegate::sizeHint(option,index);
    size.setHeight(40);
    return size;
}

void MyItemDrawer::paint(QPainter *painter,
                         const QStyleOptionViewItem &option,
                         const QModelIndex &index) const
{
    QRect rect = option.rect;   //目標矩形
    rect.adjust(2,2,-2,-2);     //調整大小，留出空白區
    // 取得代理項對應的數據
    QString name = index.data(Qt::DisplayRole).toString();
    QString phone = index.data(Qt::UserRole).toString();
    bool male = index.data(Qt::UserRole+1).toBool();
    // 該項被選中時的狀態顯示
    if(option.state & QStyle::State_Selected)
    {
        painter->setBrush(QColor(0xCC,0xAA,0xAA));
        painter->drawRoundedRect(rect,2,2);
    }
    //性別顯示
    if(1)
    {
        QRect dest = rect;
        dest.setRight(rect.left()+40);
        QRect area(0,0,24,24);
        area.moveCenter(dest.center());
        painter->drawPixmap(area,male?m_man:m_woman);
    }
    //名稱顯示
    if(1)
    {
        QRect dest = rect;
        dest.setLeft(rect.left()+40);
        dest.setBottom(rect.top()+20);
        painter->drawText(dest,Qt::AlignLeft | Qt::AlignVCenter,name);
    }
    //phone顯示
    if(1)
    {
        QRect dest = rect;
        dest.setLeft(rect.left() +40);
        dest.setTop(rect.top()+20);
        painter->drawText(dest,Qt::AlignLeft | Qt::AlignVCenter,phone);
    }
}

界面設計：（ListWidget）

運行效果：