25.QT-模型視圖

模型視圖設計模式的核心思想

• 使模型(數據)與視圖(顯示)相分離
• 模型只須要對外提供標準接口存取數據,無需數據如何顯示
• 視圖只須要自定義數據的顯示方式,無需數據如何組織存儲
• 當數據發生改變時,會經過信號通知視圖
• 當用戶與視圖進行交互時,會經過信號向模型發送交互信息 

 

在QT中提供瞭如下幾種預約義模型:

 

其中QStandardItemModel的常見子類有:

 

• QAbstractListModel:用來建立一維列表模型
• QStandardItemModel:用來存儲定製數據的通用模型
• QAbstractTableModel: 用來建立二維列表模型

 

經常使用的視圖類層次結構,以下所示:

 

在Qt中,無論模型以什麼結構組織數據,都必須爲每一個數據提供不一樣的索引值,使得視圖能經過索引值訪問模型中的具體數據

 

以QTreeView視圖爲例

    QWidget w;

    QFileSystemModel  model(&w);              //定義文件系統模型

    QTreeView   treeView(&w);                 //定義樹形顯示視圖

    treeView.resize(600,300);

    model.setRootPath(QDir::currentPath()); //設置根目錄

    treeView.setModel(&model);          //鏈接模型與視圖

    treeView.setRootIndex(model.index(QDir::currentPath()));
    // setRootInedex():設置樹形顯示視圖的數據索引,以當前目錄爲根部顯示
    // QModelIndex index(QDir::currentPath()):以當前目錄爲模型項索引

    w.show();

效果:

 

其中index()是個重載函數,用來獲取QModelIndex 索引值,完整的index()函數以下所示:

QModelIndex QAbstractItemModel::index ( int row, int column, const QModelIndex & parent = QModelIndex() );
       //返回指定的row(行)、column(列)、parent(父索引)引所在的索引值

 

對於不一樣的模型視圖而言,row(行)、column(列)、parent(父索引)的效果以下所示:

 

以QFileSystemModel爲例:

 

也能夠經過index索引值來查找數據,以QFileSystemModel模型爲例, 與index相關的成員函數有:

QIcon     fileIcon ( const QModelIndex & index );    //經過索引值獲取文件圖標
QFileInfo fileInfo ( const QModelIndex & index );    //經過索引值獲取文件信息
QString   fileName ( const QModelIndex & index ) ;   //經過索引值獲取文件名
QString   filePath ( const QModelIndex & index ) ;  //經過索引值獲取文件路徑
bool isDir ( const QModelIndex & index ) ;          //經過索引值,判斷是不是目錄

int   columnCount ( const QModelIndex & parent = QModelIndex() ) ; 
//經過索引值獲取當前列數

int   rowCount ( const QModelIndex & parent = QModelIndex() ) ; //經過索引值獲取行數

QModelIndex parent ( const QModelIndex & index ) ; //經過索引值獲取其父節點的索引值

QVariant  data ( const QModelIndex & index, int role = Qt::DisplayRole ) ;
                                                 //經過索引值獲取模型數據

bool setData ( const QModelIndex & idx, const QVariant & value, int role = Qt::EditRole );
                                           //經過索引值設置模型數據

其中data ()和setData() 函數的參數role 是模型數據角色

 

role 數據角色

當role值不一樣時,則顯示在視圖上的方式也會不一樣

對於role角色,經常使用的值有:

• Qt::DisplayRole             0          以文本方式顯示數據(QString)
• Qt::DecorationRole       1         將數據做爲圖標來裝飾(QIcon,QPixmap)
• Qt::EditRole                   2          可編輯的數據信息顯示(QString)
• Qt::ToolTipRole             3          做爲工具提示顯示(QString)
• Qt::StatusTipRole          4         做爲狀態欄中顯示的數據(QString)
• Qt::WhatsThisRole        5         做爲幫助信息欄中顯示的數據(QString)
• Qt::FontRole                   6        設置字體(QFont)
• Qt::TextAlignmentRole   7       設置模型數據的文本對齊(Qt::AlignmentFlag)
• Qt::BackgroundRole      8        設置模型數據的背景色(QBrush)
• Qt::ForegroundRole      9         設置模型數據的前景色,好比字體(QBrush)

 

以QTableView爲例

    QWidget w;
    QTableView view(&w);
    QStandardItemModel  model(&w);
    view.setModel(&model);          //設置視圖的模型

    QStandardItem itemA;

    /*設置text*/
    itemA.setData("A",Qt::DisplayRole);

    /*設置圖標*/
    QPixmap pix(":user.png");
    pix = pix.scaled(24,24,Qt::KeepAspectRatio);
    itemA.setData(pix,Qt::DecorationRole);

    /*設置漸變背景色*/
    QLinearGradient  back(0,0,100,30);
    back.setColorAt(0,Qt::white);
    back.setColorAt(0.5,Qt::green);
    back.setColorAt(1,Qt::blue);
    itemA.setData(QBrush(back),Qt::BackgroundRole);

    model.setItem(0,0,&itemA);
    model.setItem(0,1,new QStandardItem(QIcon(pix),"B"));
    model.setItem(1,0,new QStandardItem(QIcon(pix),"C"));

    w.show();

效果:

 

QTableView詳細使用請參考:24.QTableView函數使用,右擊菜單實現

 

接下來開始學習模型視圖中的委託